リロードからのフォーム提出の防止

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

ドントは、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>

won't上記のフォームは、サンドボックスモードドントので提出しますフォーム提出を許可する。