CODEWITHSUNDEEP
jqueryforms
Eric Brown
Eric Brown

Reputation: 1462

Jquery not running on form submit

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.

Upvotes: 0

Views: 106

Answers (3)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

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.

Upvotes: 0

M Maavia
M Maavia

Reputation: 340

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......
 }

Upvotes: 0

David
David

Reputation: 218798

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

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

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

Upvotes: 2

Related Questions