点击提交按钮不起作用

click on a submit button is not working

本文关键字:不起作用 按钮 提交      更新时间:2023-09-26

我的代码需要一些帮助。我在电子邮件文本字段中输入姓名和电子邮件后,点击提交按钮时遇到问题。当我单击提交按钮时,它会将按钮中的文本从show me the video更改为Submitting...,但它没有将数据发送到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?

在验证后的最后一行中,您包含了

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

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

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

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

希望对有所帮助

您可以分配表单的ID并像一样调用

 $('#formID').submit();