Jquery not running on form submit

Question

I have a Jquery function that I want to run when a form is Submitted. Here is the Jquery that is supposed to detects when form is submitted, stops the form from running it's default, and and run my code:

    $( ".submit-button" ).submit(function( event ){
         event.preventDefault();

        var button = $(this).attr("id");       

       var url = 'https://myurl.com/AddAppointment.php';
        $.ajax({
  type: "POST",
  url: url,
  data: $('#SchedulePosition').serialize(),
  success:function(){   
        if(button == 'SaveandReturn'){
            window.location.href = "Photography and Editing Jobs.html";
        }else if(button == 'SaveandView'){
            window.location.href = "Photography and Editing Jobs.html";
        }
    }

});


      });

And here are the submit buttons being used to submit the form:

<input class="btn btn-primary submit-button" style="width:50%; height:60px; float:left; font-size:18px; white-space:normal;"
id="SaveandReturn" type="submit" value="Save and Return to Photoshoot List">


<input class="btn btn-primary submit-button" style="width:50%; height:60px; float:right; font-size:18px; white-space:normal;"
id="SaveandView" type="submit" value="Save and View My Photoshoots">

And Finally, Here is my Form Header :

<form id="SchedulePosition" action="#" method="POST">

Whenever I click either of the buttons, the page just refreshes, which means that the code isn't running, but I can't figure out why it wouldn't. There are no errors that pop up in the console, nothing strange happening, it's just not triggering the Jquery.

David · Accepted Answer · 2017-01-26 18:44:20Z

2

$( ".submit-button" ).submit(...

Buttons don't have submit events, but forms do:

$( "#SchedulePosition" ).submit(...

answered Jan 26, 2017 at 18:44

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

j08691 Over a year ago

Or he could use the .click() function on the buttons

David Over a year ago

@j08691: That's one option, but won't catch any form submissions triggered by any other means.

Eric Brown Over a year ago

Ah. I see. Thanks for that. Been awhile since I used Jquery to submit forms.

M Maavia · Accepted Answer · 2017-01-26 18:49:25Z

0

include on the top of your script and

  <input onclick="myFunction()" class="btn btn-primary submit-button" style="width:50%; height:60px; float:left; font-size:18px; white-space:normal;"
id="SaveandReturn" type="submit" value="Save and Return to Photoshoot List">

  function myFunction() {
    your Login......
 }

answered Jan 26, 2017 at 18:49

M Maavia

3401 silver badge9 bronze badges

Comments

Kamina · Accepted Answer · 2017-01-26 18:51:12Z

0

Aside from David's answer, another option is to use:

$( ".submit-button" ).click(function( event ){

So when the buttons are clicked, trigger the function.

Just make sure to remove the type="submit" on the buttons to not trigger the submit when using this function.

answered Jan 26, 2017 at 18:51

Kamina

13.8k12 gold badges55 silver badges87 bronze badges

Collectives™ on Stack Overflow

Jquery not running on form submit

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related