无法提交已启用阻止默认值的表单

Question

我有一段代码要在实际提交表单之前执行。我有 ajax 调用，之后根据结果，必须提交表单，但这是行不通的。

    <form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
    <input type="text" name="username" id="username" value="test" />
    <input type="submit" name="submit" id="submit" value="Save" />
    </form>

    <script>
    $(document).on("submit", '#myform', function(event)
{
    event.preventDefault();
    var form    = $(this);
    $.ajax({
        url: "url",
        type: 'POST',
        success: function (response) 
        {
            if(response    ==  1)
            {
                form.submit();
            }
            else
            {
                return false;
            }
        }
    });
});
    </script>

Answer 1

<form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<input type="text" name="username" id="username" value="test" />
<input type="submit" name="submit" id="submit" value="Save" />
</form>

<script>
$('#myform').on('submit', function (event) 
{
  event.preventDefault();
   var form    = $(this);
   $.ajax({
    url: 'url',
    type: 'POST',
    success: function (response) 
    {
        if(response   ==  1)
        {
            form.submit();
        }
        else
        {
            // response will be valid and the ajax will be complete here
        }
    }
  });
});

事件应该运行在 ajax 被调用之前

Answer 2

你的代码应该是这样的：

<script>
$('#submit').on('click', function (event) 
{
    event.preventDefault();
    var form    = $("#myform");
    $.ajax({
        url: 'url',
        type: 'POST',
        success: function (response) 
        {
            if(response   ==  1)
            {
                form.submit();
            }                
        }
    });
    return false;
});
</script>

或者您可以使用

$( "#myform" ).submit(function( event ) {

Answer 3

你应该这样做

<script>
$('#myform').submit(function(event) {
    event.preventDefault();

    var form    = $(this);
    $.ajax({
        url: 'url',
        type: 'POST',
        success: function (response) 
        {
            if(response   ==  1)
            {
                form.submit();
            }
            else
            {

                return false;
            }
        }
    });
});
</script>

Answer 4

也许您应该运行喜欢这段代码，其中 e.preventDefault() 首先调用

<form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<input type="text" name="username" id="username" value="test" />
<input type="submit" name="submit" id="submit" value="Save" />
</form>

<script>
$('#myform').on('click', function (event) 
{
e.preventDefault();
var form    = $(this);
$.ajax({
    url: 'url',
    type: 'POST',
    success: function (response) 
    {
        if(response   ==  1)
        {
            form.submit();
        }
        else
        {
            return false;
        }
    }
});
});
 </script>

Answer 5

Ajaxreturns成功后，取消注册提交事件处理程序以避免递归调用并手动触发提交事件（更改提交按钮的id和名称以便不"hide"提交事件）

<form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<input type="text" name="username" id="username" value="test" />
<input type="submit" name="submitBtn" id="submitBtn" value="Save" />
</form>

<script>
$('#myform').on('submit', function (event) 
{
    event.preventDefault();
    var form = $(this);
    $.ajax({
        url: 'url',
        type: 'POST',
        data: form.serialize(),
        success: function(response) 
        {
            if (response ==  1)
            {
                form.off('submit');
                form.trigger('submit');
            }
        }
    });
});
 </script>

Answer 6

我不太确定你真的想用这个实现什么

if(response   ==  1)
            {
                form.submit();
            }
            else
            {
                e.preventDefault();
                return false;
            }

完全没有意义，因为你没有真正回应上面的评论，所以很难理解你想要什么。

我不确定您是否有某种验证，如果您可以使用 jQuery Validation Plugin 在前端进行验证，然后在服务器端使用服务器端进行验证。

而且你没有向服务器端发送任何数据。

您的脚本应该是这样的：

<form id="myform" method="post" action="">
<input type="text" name="username" id="username" value="test" />
<input type="submit" name="submit" id="submit" value="Save" />
</form>

<script>
$('#myform').on('submit', function (event) 
{
    event.preventDefault();
    var formdata    = $('#myform').serialize();
    $.ajax({
        url: 'url',
        type: 'POST',
        data : formdata,
        dataType : 'json',
        encode : true,
        success: function (response) 
        {
            if(response   ==  "What you expected")
            {
               // DO something else
            }
            else
            {
                // Write the error back to the user in some div
            }
        }
    });
});
</script>

编辑：如果你想在提交前进行验证，你可以使用我上面提到的库，你可以这样做

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<form id="myform" method="post" action="">
<input type="text" name="username" id="username" />
<input type="submit" name="submit" id="submit" value="Save" />
</form>

<script>

$('#myform').validate({

    rules :{

        username :{

            required : true,
        }
    },

    messages :{

        username : {

            required : "Enter username",
        }
    },

    submitHandler : sendData

});

function sendData(){

    var formdata    = $('#myform').serialize();
     $.ajax({
        url: 'url',
        type: 'POST',
        data : formdata,
        dataType : 'json',
        encode : true,
        success: function (response) 
        {
            if(response   ==  "What you expected")
            {
               // DO something else
            }
            else
            {
                // Write the error back to the user in some div
            }
        }
    });


    return false; //prevent form traditional submission    
}
</script>

也不要忘记在服务器端进行验证

更多编辑

你说你想发送请求并再次发送的原因是因为你想检查会话是否存在，你可以在向用户显示表单之前执行此操作，如果会话存在则显示表格或显示错误或其他内容

这就是你将如何做到的。

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>


<?php

    if(isset($_SESSION['name']) && !empty($_SESSION['name'])){?>

        <form id="myform" method="post" action="">
            <input type="text" name="username" id="username" />
            <input type="submit" name="submit" id="submit" value="Save" />
        </form>

            <script>

            $('#myform').validate({

                rules :{

                    username :{

                        required : true,
                    }
                },

                messages :{

                    username : {

                        required : "Enter username",
                    }
                },

                submitHandler : sendData

            });

            function sendData(){

                var formdata    = $('#myform').serialize();
                 $.ajax({
                    url: 'url',
                    type: 'POST',
                    data : formdata,
                    dataType : 'json',
                    encode : true,
                    success: function (response) 
                    {
                        if(response   ==  "What you expected")
                        {
                           // DO something else
                        }
                        else
                        {
                            // Write the error back to the user in some div
                        }
                    }
                });


                return false;    
            }
            </script>
<?php

    }else{

        // the session is not set then do nothing or show error/redirect
    }
?>

然后在您的服务器端，您还需要在接受和处理用户输入之前检查是否存在相同的会话。

<?php
    session_start();

    if(isset($_SESSION['name']) && !empty($_SESSION['name'])){


        //DO FORM PROCCESSING
    }else{

        echo json_encode('not set');

        // send not set back to the client and do something about that response.
    }
?>

Answer 7

我在项目中使用的代码下面也有相同的情况。

<form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<input type="text" name="username" id="username" value="test" />
<input type="submit" name="submit" id="submit" value="Save" />
</form>
<script>
$('#myform').submit(function(){
    $.ajax({
        url: 'url',
        type: 'POST',
        success: function (response) 
        {
            if(response   ==  1)
            {
                $("#myform")[0].submit();
            }
        }
    });
    return false;
});
</script>

Answer 8

我自己找到了这个问题的答案。

确保您没有将 "submit" 作为属性值的 "NAME" 属性。

下面是代码片段，它运行得非常好。

<form id="myform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
    <input type="text" name="username" id="username" value="test" />
    <input type="submit" name="submitForm" id="submit" value="Save" />
</form>

<script>
$(document).on("submit", '#myform', function(event)
{
    event.preventDefault();
    var form    = $(this);
    $.ajax({
        url: "<?=PATH_SITE?>actions/qa/qaActions.php?act=checkSessionExist",
        type: 'POST',
        success: function (response) 
        {
            if(response    ==  1)
            {
                form.trigger('submit');
                return true;
            }
            else
            {
                return false;
            }
        }
    });
});

无法提交已启用阻止默认值的表单

Unable to submit form with prevent default enabled

php

forms

ajax

jquery

form-submit