Preventing Form Submit From Reloading Page

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 curr

Solution 1:

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");

functionupdate(){
  console.log("You submited the form!");
}

form.addEventListener("submit", function(event){
  event.preventDefault();
  update();
  
});

<formid="predictionform-1"action=""method="post"><pstyle="text-align: center;"><inputtype="hidden"id="_footballpool_wpnonce"name="_footballpool_wpnonce"value="f12119edf4"><inputtype="hidden"name="_wp_http_referer"value="/play/"><inputtype="hidden"name="_fp_form_id"value="1"></p><tableid="matchinfo-1"class="matchinfo input"><tbody><tr><tdclass="matchtype"colspan="11">All</td></tr><tr><tdclass="matchdate"colspan="11">Dec 13, 2016</td></tr><trid="match-5-1"class="match open"title="match 5"></tr><tr><tdclass="score"style="width: 48%; text-align: center;"><inputtype="text"maxlength="3"name="_home_5"value="3"class="prediction"></td><tdstyle="width: 4%; text-align: center;"></td><tdclass="score"style="width: 48%; text-align: center;"><inputtype="text"maxlength="3"name="_away_5"value="1"class="prediction"></td><tdtitle="score"class="numeric"><spanclass="no-score"></span></td></tr></tbody></table><divclass="buttonblock button-matches form-1"><inputtype="submit"name="_submit"value="Save"></div><inputtype="hidden"id="_action_1"name="_fp_action"value="update"></form>

The form above won´t submit because sandbox mode don´t allow form submission.