表单在模态提交相同的动作(相同的PHP文件)


Forms in modal submit with same action (same PHP file)

我在两个不同的Bootstrap模态中嵌入了两个不同的表单。它们被正确地调用和加载。我可以看到每个表单(在页面的源代码中)都分配了正确的操作。做了一些侦查工作后,我发现无论我有多少带有表单的情态,它们都提交给相同的动作/表单,这是我代码中最先出现的动作/表单。

显然,我没有正确关闭某些东西或有重复的id或其他东西,但我无法找出导致问题的原因。这里有两张表格。如果我只加载其中一个,每个都可以正常工作。如果我同时加载两个表单,那么两个表单都会提交第一个表单中的动作。

值得注意的是,我有另一个形式,不是在一个模态,总是工作良好,出现在这两个其他形式在我的代码。

<div class="modal fade" id="get_started-complete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style=" overflow: scroll; height:auto;">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Getting Started</h4>
            </div>
            <div class="modal-body">
              some text here
              <form class="form form-quote dark" id="form_1" action="get_started_1.php" method="post" style="margin-top:5px;">
                <div class="form-group" style="line-height:0px;">
                  <label  style="line-height:25px;" for="fullname_1" class="col-sm-3 col-xs-12 control-label">Full Name</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="fullname_1" id="fullname_1" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label  style="line-height:25px;" for="company_name_1" class="col-sm-3 col-xs-12 control-label">Company Name</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="company_name_1" id="company_name_1" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label style="line-height:25px;" for="email_1" class="col-sm-3 col-xs-12 control-label">Email Address</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="email" style=" margin-top: 5px;" class="form-control required email" name="email_1" id="email_1" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label style="line-height:25px;" for="database_size_1" class="col-sm-3 col-xs-12 control-label">Database Size</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="database_size_1" id="database_size_1" placeholder="Enter a number">
                  </div>
                </div>
                <div class="form-group">
                    <div id="recap4"></div>
            </div>
            <input type="text" name="form_location" id="form_location" value="complete" hidden>
                <button type="submit" id="get_started_submitted-c" class="btn btn-primary btn-lg btn-block">Submit Form</button>
                (Click once and give it a second or two...)
              </form>
            </div>
          </div>
        </div>
      </div>
      <!--FORM 2-->
       <div class="modal fade" id="get_started-advanced" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style=" overflow: scroll; height:auto;">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Getting Started</h4>
            </div>
            <div class="modal-body">
              some text here
              <form class="form form-quote dark" id="form_2" action="get_started_2.php" method="post" style="margin-top:5px;">
                <div class="form-group" style="line-height:0px;">
                  <label  style="line-height:25px;" for="fullname_2" class="col-sm-3 col-xs-12 control-label">Full Name</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="fullname_2" id="fullname_2" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label  style="line-height:25px;" for="company_name_2" class="col-sm-3 col-xs-12 control-label">Company Name</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="company_name_2" id="company_name_2" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label style="line-height:25px;" for="email_2" class="col-sm-3 col-xs-12 control-label">Email Address</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="email" style=" margin-top: 5px;" class="form-control required email" name="email_2" id="email_2" placeholder="">
                  </div>
                </div>
                <div class="form-group" style="line-height:0px;">
                  <label style="line-height:25px;" for="database_size_2" class="col-sm-3 col-xs-12 control-label">Database Size</label>
                  <div class="col-sm-9 col-xs-12">
                    <input type="text" style=" margin-top: 5px;" class="form-control" name="database_size_2" id="database_size_2" placeholder="Enter a number">
                  </div>
                </div>
                <div class="form-group">
                    <div id="recap3"></div>
            </div>
            <input type="text" name="form_location_2" id="form_location_2" value="advanced" hidden>
                <button type="submit" id="get_started_submitted-a" class="btn btn-primary btn-lg btn-block">Submit Form</button>
                (Click once and give it a second or two...)
              </form>
            </div>
          </div>
        </div>
      </div>

理论,我的提交处理程序是导致问题。如下所示:

submitHandler: function(form) {
      var $this = $(form);
      $.ajax({
        url: $this.attr('action'),
        type: 'POST',
        data: $this.serialize(),
      })
      .done(function(msg) {
        if( msg == 'ok' ) {
          toastr.success('Thank you. We will be in touch within 24 hours.');
          $this[0].reset();
        } else {
          toastr.error('Sorry. An error occured. Please try again later or email us directly ');
        }
      })
      .fail(function() {
        toastr.error('An error occured. Please try again later or email us directly .');
      });
    }  

似乎validate()插件不能很好地在一个选择器中调用多个表单。

尝试这样初始化:

$('form.form-quote').each(function(){
     $(this).validate({ /* options */}); 
});

应该更好地隔离实例

见https://stackoverflow.com/a/19209548/1175966