我有两个问题:
-
如何在同一页面中创建第二个表单,并根据单击的提交按钮使用ajax处理正确的表单?
-
现在让我们假设我在同一页中有多个表单。我想根据单击的提交按钮来更改输出的位置。
源代码:
Ajax:
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$.post('post.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
Html:
<form id="myform" action="" method="POST">
<input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results"></div> <!-- post.php output goes here.-->
<!-- until here everything is working fine -->
<!-- now if I want to add a second form I don't know what id I should use -->
我会在表单上使用一个类来绑定,然后每个表单都可以有一个元素来保存您选择的输出id-
javascript
<script type="text/javascript">
$(document).ready(function(){
$(".myforms").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$.post('post.php', $(form).serialize(), function(data) {
var output = $(form).data('output');
$("#"+output).html(data);
});
}
});
});
</script>
html
<form class="myforms" action="" method="POST" data-output="results1">
<input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results1"></div>
<form class="myforms" action="" method="POST" data-output="results2">
<input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results2"></div>
<form class="myforms" action="" method="POST" data-output="results3">
<input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results3"></div>