Question

我有两个问题。如果我直接加载我的页面，我的表单只会提交一次。如果我在一个模态中加载表单，它将不会提交。

成功后我想重新显示表单（通过ajax加载）并且仍然将脚本重新绑定到表单。

HTML / jQuery 已编辑

 <div class="modal-content">
      <form id="userSignUp">{{FORM ELEMENTS}}
      <input type="submit" onclick="submitForm('#userSignUp',event)">
  </form>
 </div>
 <script>
 function submitForm(formID,e){
        //e.preventDefault(); //STOP default action 
        var postData = $("#"+formID).serializeArray();
        var formURL = $("#"+formID).attr("action");
        alert(formID);
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            cache: false,
            success:function(data, textStatus, jqXHR) 
            { 
                $('.modal-content').html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) 
            { 
                $('.signUpError').html('<div class="alert alert-warning">There was a problem communicating with the site. Refresh the page and try again.</div>');
            }
        });

        e.preventDefault(); //STOP default action 
    }
 </script>

编辑我已经更新了我的脚本 - 但现在问题似乎是每次表单提交时，它都希望使用第一种形式提交的数据。它似乎没有对udpated数据进行重新定位。

Answer 1

你的表单是动态元素，对动态元素使用绑定：

而不是

$("#userSignUp").submit(function(){});

使用

$(document).on('submit', "#userSignUp"), function(){};

Answer 2

我会这样做：

  <form id="userSignUp">

    <div class="modal-content">
      {{FORM ELEMENTS}}
   </div>
  </form>

这样您就不必重新绑定表单和新内容。

jQuery Ajax表单只会绑定一次提交

2 个答案: