这是我第一次尝试使用AJAX表单提交。我已经让它工作但是当我点击任何按钮时提交火灾,而不仅仅是提交。我打算最终将清除按钮连接到表单清除操作,但到目前为止它会提交表单。
HTML
<form id="testForm" role="form" action="" method="">
<div class="form-group" >
<label for="testArea" class="sr-only">Enter your text.</label>
<textarea class="form-control" name="testArea" rows="15" id="testArea" placeholder="..."></textarea>
<button name="submitTest" type="submit" class="btn btn-primary" >Submit</button>
<button class="btn btn-primary">Clear</button>
</form>
JS
$("#testForm").submit(function(event){
event.preventDefault();
var serializedData = $(this).serialize();
$.ajax({
url : "processor.php",
type : "post",
data : serializedData,
success : function(data) {
$('#testForm').html(data);
}
})
});
我认为.submit会触发表单的真实提交,这是错的?
答案 0 :(得分:4)
将代码绑定到button.click
事件:
$("#testForm [name='submitTest']").click(function(event){
顺便说一句,“清除”按钮可能不是必需的。这只是偶然点击的东西,然后是安静的咒骂。而是在单击“提交”按钮时自动清除该字段。
答案 1 :(得分:2)
只需将清除按钮变为重置按钮:
<button type="reset" class="btn btn-primary">Clear</button>
这不仅使它不提交表格,而且在点击时清楚表明了表格。