无法提交表单并启用了“防止默认”

时间：2017-05-03 09:33:15

标签： php jquery ajax forms form-submit

我有一个代码要在实际提交表单之前执行。我有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>

8 个答案:

答案 0 :(得分：1)

我不太确定你真正想要用这个来实现什么

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.
    }
?>

答案 1 :(得分：1)

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

确保您没有“提名”作为属性值的“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;
            }
        }
    });
});

答案 2 :(得分：0)

<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之前运行

答案 3 :(得分：0)

你应该这样做

<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>

答案 4 :(得分：0)

Ajax成功返回后，取消注册提交事件处理程序以避免递归调用并手动触发提交事件（更改提交按钮的ID和名称，以便不“隐藏”提交事件）

<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>

答案 5 :(得分：0)

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

<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>

答案 6 :(得分：-1)

你的代码应该是这样的：

<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 ) {

答案 7 :(得分：-1)

也许你应该像第一次调用 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>
相关问题
最新问题