我试图让我的表单提交数据而不重新加载页面本身,但目前我正在努力做到这一点。
当我在当前设置中单击提交按钮时,没有任何反应。如果我删除 onsubmit="return validateForm()"
那么数据将保存,但页面会重新加载。
表单 HTML
<form id="predictionform-1" action="" method="post" onsubmit="return validateForm()"><p style="text-align: center;"><input type="hidden" id="_footballpool_wpnonce" name="_footballpool_wpnonce" value="f12119edf4"><input type="hidden" name="_wp_http_referer" value="/play/"><input type="hidden" name="_fp_form_id" value="1"></p><table id="matchinfo-1" class="matchinfo input"><tbody><tr><td class="matchtype" colspan="11">All</td></tr><tr><td class="matchdate" colspan="11">Dec 13, 2016</td></tr><tr id="match-5-1" class="match open" title="match 5">
</tr>
<tr><td class="score" style="width: 48%; text-align: center;"><input type="text" maxlength="3" name="_home_5" value="3" class="prediction"></td>
<td style="width: 4%; text-align: center;"></td>
<td class="score" style="width: 48%; text-align: center;"><input type="text" maxlength="3" name="_away_5" value="1" class="prediction"></td>
<td title="score" class="numeric"><span class="no-score"></span></td>
</tr></tbody></table><div class="buttonblock button-matches form-1"><input type="submit" name="_submit" value="Save"></div><input type="hidden" id="_action_1" name="_fp_action" value="update"></form>
JavaScript
<script type="text/javascript">
function validateForm()
{
return false;
}
任何帮助将不胜感激。
谢谢
最佳答案
不要使用 HTML 属性 onsubmit,这不是一个好的做法。
但问题是你必须捕获该事件并阻止他的默认行为,如下所示:
var form = document.getElementById("predictionform-1");
function update(){
console.log("You submited the form!");
}
form.addEventListener("submit", function(event){
event.preventDefault();
update();
});
<form id="predictionform-1" action="" method="post"><p style="text-align: center;"><input type="hidden" id="_footballpool_wpnonce" name="_footballpool_wpnonce" value="f12119edf4"><input type="hidden" name="_wp_http_referer" value="/play/"><input type="hidden" name="_fp_form_id" value="1"></p><table id="matchinfo-1" class="matchinfo input"><tbody><tr><td class="matchtype" colspan="11">All</td></tr><tr><td class="matchdate" colspan="11">Dec 13, 2016</td></tr><tr id="match-5-1" class="match open" title="match 5">
</tr>
<tr><td class="score" style="width: 48%; text-align: center;"><input type="text" maxlength="3" name="_home_5" value="3" class="prediction"></td>
<td style="width: 4%; text-align: center;"></td>
<td class="score" style="width: 48%; text-align: center;"><input type="text" maxlength="3" name="_away_5" value="1" class="prediction"></td>
<td title="score" class="numeric"><span class="no-score"></span></td>
</tr></tbody></table><div class="buttonblock button-matches form-1"><input type="submit" name="_submit" value="Save"></div><input type="hidden" id="_action_1" name="_fp_action" value="update"></form>
上面的表单不会提交,因为沙盒模式不允许表单提交。
关于javascript - 防止表单提交重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40950491/