javascript - 我的表单提交按钮正在执行与页面上其他按钮相同的操作

Question

我的页面上有 4 个按钮。其他三个按预期工作。他们将用户定向到另一个 URL 并增加状态栏。第四个按钮我只想重定向到一个 URL 或根据表单提交给出“成功”通知。

相反，我使用第 4 个按钮得到的只是状态栏增加

我试过给按钮一个特定的 ID 并为该功能调用该 ID，但它不起作用

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

您有 2 个特定元素的事件 -

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

当您按下“您的 4”按钮时，“捕获”了 2 个事件并运行了代码。 如果您只希望“myButton”事件的特定代码起作用，您可以选择糟糕的解决方案:

$('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 + '%');
   }
});

它会起作用，但感觉所有按钮的行为都不相同，所以最好的解决方案是创建 2 个类 -

1. 所有按钮的类，没有它的行为与 “我的按钮”和
2. “myButton”类

示例:

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

});