防止表单从重新加载页面提交 [英] Preventing form submit from reloading page
本文介绍了防止表单从重新加载页面提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让我的表单提交数据而不重新加载页面本身，但目前我正在努力做到这一点。
当我点击提交按钮在当前设置中有。如果我删除 onsubmit =return validateForm（），那么数据将会保存，但页面会重新加载。
表格HTML
< form id =predictionform-1 action =method =postonsubmit =return validateForm（）>< p style =text-align：center;>< input type =hiddenid =_ footballpool_wpnoncename = _footballpool_wpnoncevalue =f12119edf4>< input type =hiddenname =_wp_http_referervalue =/ play />< input type =hiddenname =_ fp_form_idvalue =1 < tbody>< tr>< td class =matchtypecolspan =11>所有< / td>< / tr>< tr>< td class =matchdatecolspan =11> 2016年12月13日< / td>< / tr>< tr id = 1class =match opentitle =match 5>
< / tr>
< tr>< td class =scorestyle =width：48％; text-align：center;>< input type =textmaxlength =3name =_ home_5 value =3class =prediction>< / td>
< td style =width：4％; text-align：center;>< / td>
< td class =scorestyle =width：48％; text-align：center;>< input type =textmaxlength =3name =_ away_5value = 1class =prediction>< / td>
< td title =scoreclass =numeric>< span class =no-score>< / span>< / td>
< / tr>< / tbody>< / table>< div class =buttonblock button-matches form-1>< input type =submitname =_ submit Save>< / div>< input type =hiddenid =_ action_1name =_ fp_actionvalue =update>< / form>
JavaScript
< script type =text / javascript>
函数validateForm（）
{
return false;
}
帮助将非常感谢。
谢谢
解决方案
Don't使用HTML属性onsubmit，这是不是一个好习惯。
但问题是，你必须捕捉事件并防止他的默认行为，如下所示： p>
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-1action =method =post> ;< p style =text-align：center;>< input type =hiddenid =_ footballpool_wpnoncename =_ footballpool_wpnoncevalue =f12119edf4>< input type =hiddenname =_wp_http_referervalue =/ play />< input type =hiddenname =_ fp_form_idvalue =1> ;< / p>< table id =matchinfo-1class =matchinfo input>< tbody>< tr>< td class =matchtypecolspan =11> All< >< / tr>< tr>< td class =matchdatecolspan =11> 2016年12月13日< / td>< / tr>< tr id =match-5-1 class =match opentitle =match 5> < / TR> < tr>< td class =scorestyle =width：48％; text-align：center;>< input type =textmaxlength =3name =_ home_5value = 3class =prediction>< / td>< td style =width：4％; text-align：center;>< / td> < td class =scorestyle =width：48％; text-align：center;>< input type =textmaxlength =3name =_ away_5value =1class = 预测 >< / TD> < td title =scoreclass =numeric>< span class =no-score>< / span>< / td> < / tbody>< / table>< div class =buttonblock button-matches form-1>< input type =submitname =_ submitvalue =Save> ;< / div>< input type =hiddenid =_ action_1name =_ fp_actionvalue =update>< / form>
上面的表格不会提交，因为沙盒模式不允许表单提交。
I am trying to make my form submit the data without reloading the page itself but currently I am struggling to do so.
Nothing is happening when I click my submit button in the current setup I have. If I remove the onsubmit="return validateForm()" then the data will save but the page reloads.
Form 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;
}
Any help will be much appreciated.
Thanks
解决方案
Don´t use the HTML attribute onsubmit, it is not a good practice.
But the problem is that you must catch the event and prevent his default behavior, something like this:
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>
The form above won´t submit because sandbox mode don´t allow form submission.
这篇关于防止表单从重新加载页面提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
