javascript - 单击提交按钮不起作用

Question

我的代码需要一些帮助。在电子邮件文本字段中输入我的姓名和电子邮件后，我在单击提交按钮时遇到问题。当我点击提交按钮时，它会将按钮中的文本从 显示视频 更改为 正在提交...，但它不会将数据发送到 app.getresponse.com 并且它没有重定向到外部网站，例如:www.google.com。

这是代码:

<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
        <div style="margin-top: 23px; outline: none; cursor: pointer;" class="de elInputWrapper de-input-block elAlign_center elMargin0 de-editable" id="tmp_input-61506" data-de-type="input" data-de-editing="false" data-title="Name Input" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500">                
        <!-- <input placeholder="Enter Your Full Name" name="name" id="name" class="elInput elInput100 elAlign_left elInputBR5 elInputIRight required0 elInputIName elInputIColor elInputStyle2 elInputBG2 elInputMid garlic-auto-save" data-type="extra" type="text"> -->

         <!-- Name -->
    <input placeholder="Enter Your Full Name" name="name" id="name" class="elInput elInput100 elAlign_left elInputBR5 elInputIRight required0 elInputIName elInputIColor elInputStyle2 elInputBG2 elInputMid garlic-auto-save" data-type="extra" type="text"/>
        </div>

        <div style="margin-top: 15px; outline: none; cursor: pointer;" class="de elInputWrapper de-input-block elAlign_center elMargin0 de-editable" id="input-11821" data-de-type="input" data-de-editing="false" data-title="Email Input" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500">

<input placeholder="Enter Your Email Address" type="text" name="email" id="email" class="elInput elInput100 elAlign_left elInputBR5 elInputIRight required0 elInputIColor elInputIEmail elInputBG2 elInputStyle2 elInputMid garlic-auto-save" data-type="extra"/>
        </div>      




    <!-- Campaign token -->
    <!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
    <input type="hidden" name="campaign_token" value="pQ5kB" />
    <!-- Thank you page (optional) -->
    <input type="hidden" name="thankyou_url" value="https://www.google.com"/>

    <!-- Forward form data to your page (optional) -->
    <input type="hidden" name="forward_data" value="" />

    <!-- Subscriber button -->
    <input type="submit" class='elButton elButtonColor1 elButtonFull elButtonBottomBorder elButtonTxtColor1 elButtonIcon1 elFont_oswald elButtonSize3' value='SHOW ME THE VIDEO...' style='text-align: center; max-width:470px; max-height:176px; color: rgb(255, 255, 255); background-image: url(images/button.jpg); background-color: rgb(247, 175, 11); border:0px;'/>

    </form>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function() 
        {
           var emailRegex = /^(?:\w+\.?\+?)*\w+@(?:\w+\.)+\w+$/;
           var $button = $(".elButton ");
           var $nameInput = $(".elInputIName");
           var $emailInput = $(".elInputIEmail");
           var $nameWrapper = $(".elInputWrapper#tmp_input-61506");
           var $emailWrapper = $(".elInputWrapper#input-11821");
           $nameWrapper.append("<span class='error' style='display:none'>Please let us know your name.</span>");
           $emailWrapper.append("<span class='error' style='display:none'>What email should we send your video to?</span>");                

           $button.click(function(e) 
           {
              e.preventDefault();
              var emptyName = true;
              var emptyMail = true;
              var name = $nameInput.val().trim();
              var email = $emailInput.val().trim();
              if (!name) 
              {
                 $nameWrapper.find(".error").show();
         emptyName = true;
              } 
              else 
              {
                 $nameWrapper.find(".error").hide();
                 emptyName = false;
              }

              if (!email || !emailRegex.test(email)) 
              {
                 $emailWrapper.find(".error").show();
                 emptyMail = true;
              } 
              else 
              {
                 $emailWrapper.find(".error").hide();
                 emptyMail = false;
              }

              if (!emptyName & !emptyMail) 
              {
                 $(this).val("SUBMITTING...");
                 $("form#webform").submit();
              }
           });
        });
    </script>

我猜问题与 css 上的代码有关，它不允许我将数据发送到 app.getresponse.com 然后重定向到外部站点。

您能否帮助我了解如何使提交按钮生效，以更改文本并将数据发送到 app.getresponse.com，然后将我的网站重定向到 google.com？

Answer 1

在验证后的最后一行中，您已包含

$("form#webform").submit();

但是，您的 html 中不存在 ID 为 webform 的表单。检查更正后的源代码，似乎可以工作(当然，提交在 jsdfiddle 上不起作用，因为它是跨源的)。

https://jsfiddle.net/4kknv3qb/5/

或者将 id='webform' 添加到您的表单元素。应该可以。

希望有帮助