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个类-

所有按钮的类，其行为与 “ myButton”和
“ 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";
}); 

});

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

1 个答案: