[英]Ajax form duplicating on submit
我有3个选择框,每个选择框的值根据之前选择框的选择进行填充:
selectbox1 => populates => selectBox2 =>填充selectBox 3:
现在,当用户点击提交时,我想使用选择框中的值来查询我的数据库
我的问题
当我点击提交时:
所以简而言之,变量正确地传递给我的PHP代码,但表单在提交时重复...
发送表单数据的代码
我相信问题出现在这段代码中
<script type="text/javascript">
jQuery(document).click(function(e){
var self = jQuery(e.target);
if(self.is("#resultForm input[type=submit], #form-id input[type=button], #form-id button")){
e.preventDefault();
var form = self.closest('form'), formdata = form.serialize();
//add the clicked button to the form data
if(self.attr('name')){
formdata += (formdata!=='')? '&':'';
formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
}
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: formdata,
success: function(data) {$('#resultForm').append(data); }
});
}
});
</script>
HTML
<form method="post" id="resultForm" name="resultForm">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
include('connect.php');
$sql="SELECT distinct sport_type FROM events";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
?>
<option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
<?php
}
?>
</select>
<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>
<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
<input type="submit" value="View Picks" name="submit" />
</form>
你要附加结果。
如果您不想复制,请将旧内容替换为旧内容。
改变这个
success: function(data) {$('#resultForm').append(data); }
至
success: function(data) {$('#resultForm').replaceWith(data); }
甚至
success: function(data) {$('#resultForm').html(data); }
有关replacewith
详细信息,请参阅此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.