Javascript 使用相同操作提交模式中的表单(相同的PHP文件)
我在两个不同的引导模态中嵌入了两种不同的形式。它们被正确调用和加载。我可以看到每个表单(在页面的源代码中)都有分配给它的正确操作。做了一些调查工作后,我发现无论我有多少个情态动词和形式,它们都服从同一个动作/形式,这是我代码中的第一个动作/形式 很明显,我没有正确关闭某些东西,或者有重复的ID或其他东西,但我无法找出导致问题的原因。这里有两种形式。如果我只加载其中一个,每个都可以正常工作。如果我同时加载了这两个表单,那么这两个表单都会在第一个表单中提交操作 值得注意的是,我有另一种形式,它不在模态中,它总是很好地工作,在我的代码中,它位于这两种形式之前Javascript 使用相同操作提交模式中的表单(相同的PHP文件),javascript,php,jquery,forms,twitter-bootstrap,Javascript,Php,Jquery,Forms,Twitter 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">×</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">×</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>
在一个选择器中调用多个表单时,validate()插件似乎无法正常工作
尝试以下方式初始化:
$('form.form-quote').each(function(){
$(this).validate({ /* options */});
});
应该更好地隔离实例吗
请参见是否有通过ajax提交的提交处理程序?还是这些默认浏览器提交?@charlietfl我真的不确定。我该如何检查?页面是否重新加载,或者您是否在浏览器开发工具中看到请求network@charlietfl页面无法重新加载。我在dev tools中看到了这个请求。然后问题出现在提交处理javascript中。我猜它是从第一个表单
action
$('form.form-quote').each(function(){
$(this).validate({ /* options */});
});