【问题标题】:Unable to submit form with prevent default enabled无法在启用默认设置的情况下提交表单
【发布时间】:2017-05-03 09:33:14
【问题描述】:

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

【问题讨论】:

  • 具体一点..“不工作”..你的错误是什么?
  • 有什么反应?
  • 'url' 的值是多少?您是否检查了“响应”的值?是不是1?
  • 您真的想在有人点击后立即提交表单吗? $('#myForm').on('submit'... 似乎更合适
  • 为什么在ajax调用之后提交表单。 ajax调用的意义何在?此外,您不会通过 AJAX 传递任何数据

标签: php jquery ajax forms form-submit


【解决方案1】:

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

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

这根本没有意义,而且很难理解你想要什么,因为你并没有真正回应上面的 cmets。

我不确定您是否有某种验证,如果用于验证,您可以使用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.
    }
?>

【讨论】:

  • 但是他想再次调用提交到表单的操作。这不是要递归调用提交处理程序(ajax 调用等)吗?
  • @Wizard 我认为他会进行验证,然后在满足验证规则时再次提交......但所有这些都可以在一次调用中完成
  • 当然可以,但是当他再次提交时,ajax 调用也会再次发生。请参阅下面的答案,您必须在提交表单操作之前取消注册提交处理程序。
  • @MasivuyeCokile 我的要求是我想提交表单数据,但在提交之前我想执行一个 ajax,它在内部检查我不需要表单数据的东西。如果 response == 1 ,那么我想提交表单。其他表单提交不应该发生
  • 你可以在一个电话中完成所有这些,你想首先在内部检查什么?
【解决方案2】:

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

确保您没有将“提交”作为属性值的“NAME”属性。

下面是代码 sn-p,它工作得非常好。

<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;
            }
        }
    });
});

【讨论】:

    【解决方案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>
    

    【讨论】:

    • 可能的递归调用
    • 如果响应不正确,您的意思是递归 ajax 调用?
    • 你可以做任何事情
    【解决方案4】:
    <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 之前运行

    【讨论】:

    • 如果我在ajax调用之前有这个,那么IF条件下的表单提交将不会发生,只有else条件会起作用。
    • “提交时”而不是“点击时”
    【解决方案5】:

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

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

    【讨论】:

    • 这真的没有意义。我认为OP很困惑。为什么要在 ajax 之后提交表单。很奇怪
    【解决方案6】:

    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>
    

    【讨论】:

      【解决方案7】:

      也许你应该像下面这样运行 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>
      

      【讨论】:

      • 您不能使用点击表单ID。更改为按钮的 id。也不是我的反对
      【解决方案8】:

      你的代码应该是这样的:

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

      【讨论】:

      • returnpreventDefault()success 处理程序中不会做任何事情,因为它是异步的
      猜你喜欢
      • 1970-01-01
      • 2019-03-11
      • 2013-07-09
      • 1970-01-01
      • 2019-06-26
      • 1970-01-01
      • 2017-12-05
      • 2010-12-11
      • 1970-01-01
      相关资源
      最近更新 更多