单击提交按钮不起作用

时间:2016-01-11 02:01:48

标签: javascript php jquery html

我的代码需要一些帮助。我在电子邮件文本字段中输入我的姓名和电子邮件后,单击提交按钮时遇到问题。当我点击提交按钮时,它会将按钮中的文字从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?

2 个答案:

答案 0 :(得分:3)

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

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

但是,你的html中不存在带有id webform的表单。检查更正的源代码,这似乎有效(当然,提交不适用于jsdfiddle作为其交叉原点)。

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

或者将id='webform'添加到表单元素中。应该这样做。

希望有所帮助

答案 1 :(得分:0)

您可以指定表单ID并调用

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