我试图在提交后将表单发送到php文件并检索值而不重新加载页面。它已经工作了一段时间,但现在我无法让它工作。我有多个页面执行类似的任务,2个工作非常好,但其他3个没有......
我一直在仔细阅读代码,但我找不到问题。我还注意到,当我点击提交时,我输入表单的值只是进入浏览器的地址栏,页面重新加载甚至没有进入php文件。
这是JS:
<script type="text/javascript">
$(function(){
$("#myform").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('.results').html(data).show(); // you can chain for efficiency
});
}
});
});
</script>
和HTML对于长度的抱怨:
<form id = 'myform'>
<fieldset>
<legend>College GPA Calculator</legend>
<div class = 'btn-container'>
<button class = "btn btn-info" type = 'button'id = "add">Add Row </button>
<button class = "btn btn-info" type = 'button'id = "remove"> Remove Row</button>
</div>
<table>
<tr>
<th> Class Name </th> <th> Units </th> <th> GPA </th>
</tr>
<tr>
<td> <input class = 'input-medium'type = 'text' placeholder = "Optional"> </td>
<td> <input class = 'input-small'type = "text" name = "units[]" placeholder = "Units Earned"> </td>
<td>
<select class = 'selectpicker' name = "grades[]" >
<option value = "0"> SELECT </option>
<option value = "A"> A </option>
<option value = "AMINUS"> A- </option>
<option value = "BPLUS"> B+ </option>
<option value = "B"> B </option>
<option value = "BMINUS"> B- </option>
<option value = "CPLUS"> C+</option>
<option value = "C"> C </option>
<option value = "CMINUS"> C- </option>
<option value = "DPLUS"> D+ </option>
<option value = "D"> D </option>
<option value = "DMINUS"> D- </option>
<option value = "F"> F</option>
</select>
</td>
</tr>
<tr>
<td> <input class = 'input-medium'type = 'text' placeholder = "Optional"> </td>
<td> <input class = 'input-small'type = "text" name = "units[]" placeholder = "Units Earned"> </td>
<td>
<select class = 'selectpicker' name = "grades[]" >
<option value = "0"> SELECT </option>
<option value = "A"> A </option>
<option value = "AMINUS"> A- </option>
<option value = "BPLUS"> B+ </option>
<option value = "B"> B </option>
<option value = "BMINUS"> B- </option>
<option value = "CPLUS"> C+</option>
<option value = "C"> C </option>
<option value = "CMINUS"> C- </option>
<option value = "DPLUS"> D+ </option>
<option value = "D"> D </option>
<option value = "DMINUS"> D- </option>
<option value = "F"> F</option>
</select>
</td>
</tr>
</table>
<div class = 'bottomCalcResults'>
<button type="submit" class="btn btn-primary">Submit</button>
<button class = 'btn btn-warning' id = 'reset'type = 'reset'>Reset</button>
<div class = 'results'></div>
</div>
</fieldset>
</form>
这里是安装说明:
<link rel = 'stylesheet' type = 'text/css' href = 'assets/css/style.css' media = "screen">
<link rel= 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>
<link rel = 'stylesheet' type = 'text/css' href = 'assets/css/normalize.css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src = "assets/js/dropdown.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
我不知道发生了什么,但我似乎无法找到它!请帮忙! 感谢。
答案 0 :(得分:1)
您需要在插件的return false
回调函数中添加submitHandler
作为最后一项。如果在您添加return false
后页面仍在重新加载,则表示您尚未正确添加。
这是放置return false;
的地方:
$(function () {
$("#myform").validate({
submitHandler: function (form) {
$.post('process.php', $("#myform").serialize(), function (data) {
$('.results').html(data).show();
});
return false; // <- last item inside submitHandler function
}
});
});
工作演示: http://jsfiddle.net/2QspF/
jsFiddle演示和您的真实代码之间的唯一区别是$.post
函数被注释掉以防止jsFiddle 404错误,因为我们无法访问您的process.php
文件。
旁注:您还应该可以使用$(form).serialize()
代替$("#myform").serialize()
。请参阅:http://jsfiddle.net/L7vLt/
答案 1 :(得分:0)
尝试添加
return false;
来自您的submitHandler函数的。我认为由于您通过ajax发布表单,因此需要阻止默认功能发生