JQuery-AJAX form submits but reloads page, changes url

Question

I'm creating a Laravel application and am trying to get a form to submit without a page reload using AJAX. I feel like I am getting really close, but I am just missing something.

Here is my form:

<form name="new_stat" id="new_stat" role="form" >

My submit button:

<input type="submit" id="addStatButton" />

Aaaand my Controller Method (ala Laravel):

public function store(Request $request) {
    $this->validate($request, [
      'stat' => 'required',
      'game_id' => 'required',
      'player_id' => 'required',
      'period' => 'required',
      'video_timestamp' => 'required',
    ]);

    $statToAdd = Stat_Meta::where('stat_abr', $request->input('stat'))->first()->id;

    $stat = new Stat;
    $stat->stat = $statToAdd;
    $stat->game_id = $request->input('game_id');
    $stat->player_id = $request->input('player_id');
    $stat->period = $request->input('period');
    $stat->video_timestamp = $request->input('video_timestamp');

    $stat->save();

    //I got rid of this thinking it would help stop the page reload. It didn't.
    //return redirect('/take-stats/1');
}

I tried this JS, but when I submitted the form, it registered the stuff to the database (yay!), but it reloaded the page and added parameters to the URL:

$('input#addStatButton').click( function() {
      $.post( '{{action("StatController@store")}}', $('form#new_stat').serialize(), function(data) {

         },
         'json' // I expect a JSON response
      );
  });

Now, after that, I read several places that I might wanna use 'submit' instead of 'click' if I didn't want the page reload, so I tried this:

    $('form#new_stat').on('submit', function(e) {
    //e.preventDefault();
    $.post( 'post-stat', $('form#new_stat').serialize(), function(data) {

       },
       'json' // I expect a JSON response
    );
});

When I do this with 'e.preventDefault();' commented out, the page reloads, the url gets the parameters, but no record is added to the db. When I don't comment it out, no url change, no page reload, no record added to the db.

I am a TOTAL JQuery noob, I really prefer vanilla js, but I know that it is necessary to make this happen. I am not sure if maybe Laravel is involved in making this not work, or what is happening, but that is in fact why I posted my question here lol

Answer 1

You can change to type="button" to prevent reload page

<input type="submit" id="addStatButton" />

to

<input type="button" id="addStatButton" />

Answer 2

The submit type will cause a page reload when you submit. You could change the type to button and use the click event itself.

Or other wise, use the click event on the submit type input and fire the e.preventDefault() at the start of the event-handler