防止表單提交重新加載頁面

Question

我正在嘗試使表單提交數據而無需重新加載頁面本身，但是目前我正在努力做到這一點。

單擊當前設置中的“提交”按鈕時，沒有任何反應。 如果刪除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;
}

任何幫助都感激不盡。

謝謝

Answer 1

不要在onsubmit上使用HTML屬性，這不是一個好習慣。

但是問題在於您必須捕獲事件並阻止其默認行為，如下所示：

 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> 

上面的表單無法提交，因為沙箱模式不允許表單提交。