My form submit button is taking same action as other buttons on page

Question

I have 4 buttons on my page. The other three work as expected. They direct the user to another URL and increase a status bar. The fourth button I only want to redirect to a URL or give a "success" notice based on form submission.

Instead all I get with the 4th button is the status bar increasing

I've tried giving the button a specific ID and calling that ID for the function but it's not working

Form portion of HTML
**********************
 <div class="container">
 <form id="api" 
      action="https://forms.hubspot.com/uploads/form/v2/6145807/1e936df3- 
              9dc4-44b7-a487-28a83e86859a" method="post">



<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Your 
name..">

<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last 
name..">

<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email 
address">

<label for="phone">Cell Number</label>
<input type="text" id="phone" name="phone" placeholder="Your mobile 
number">

<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Your home city">

<button id="submitButton" class="submitButton">Submit</button>
<input type="hidden" name="redirect" value="page2.html">


  </form>


java script file
*******************************


$(".submitButton").on('click', (function(){ $("$api").submit()

    window.location.href = "https://youtu.be/HV7AXRABSng?t=9";

 When I submit, I get the API POST that I want but I can't get the user 
 redirected to a second url that I want

Answer 1

You have 2 events for specific element -

$('button').on('click', function()    - Is event for every Button
$("#myButton").click(function()       - Is event for specific button with id "myButton"

When you pressed the button "your 4" 2 events "caught" and ran the code. If you want only the specific code of the "myButton" event will work you can choose the bad solution :

$('button').on('click', function() {
    if(this.id != "myButton"){
      clicks++;
      var percent = Math.min(Math.round(clicks / 3 * 100), 100);
      $('.percent').width(percent + '%');
      $('.number').text(percent + '%');
   }
});

it will work but it feels that for all the buttons do not have the same behavior, so the best solution is to create 2 classes -

1. a class for all the buttons without that behave differently to "myButton" and
2. class for "myButton"

Example:

HTML

<form action="https://forms.hubspot.com/uploads/form/v2/6145807/1e936df3- 
    9dc4-44b7-a487-28a83e86859a" method="post">



<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Your 
 name..">

<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name..">

<label for="email">email</label>
<input type="text" id="email" name="email" placeholder="Your email address">
<button id="diffrentButton" class="diffrentButton">Submit</button>
<button id="myButton" class="submitButton">Submit</button>

JS

 $(function() {
        var clicks = 0;
        $('.diffrentButton').on('click', function() {
            clicks++;
            var percent = Math.min(Math.round(clicks / 3 * 100), 100);
            $('.percent').width(percent + '%');
            $('.number').text(percent + '%');
        });




$('.facebook').on('click', function() {
    var w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);


        if ((screen.width < 480) || (screen.height < 480)) {
            window.open ('https://www.facebook.com/share.php?u=http%3A%2F%2Fhubspotpresentation.us-west-2.elasticbeanstalk.com%2F', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        } else {
            window.open ('https://www.facebook.com/share.php?u=http%3A%2F%2Fhubspotpresentation.us-west-2.elasticbeanstalk.com%2F', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);   
        }
;

 $('.twitter').on('click', function() {
    var loc = encodeURIComponent('http://saving-sherpa.com'),
            title = "So stoked to hire @saving_sherpa to @HubSpot — ",
            w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);

        window.open('http://twitter.com/share?text=' + title + '&url=' + 
loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', 
toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
    });

$('.play').on('click', function() {
        window.location.href = "https://youtu.be/ZypNNDDLJhE?t=208";
});


$(".submitButton").click(function(){
        window.location.href = "https://youtu.be/HV7AXRABSng?t=9";
}); 

});