【问题标题】:click on a submit button is not working单击提交按钮不起作用
【发布时间】:2016-01-11 02:01:47
【问题描述】:

我的代码需要一些帮助。在电子邮件文本字段中输入我的姓名和电子邮件后,我在单击提交按钮时遇到问题。当我点击提交按钮时,它会将按钮中的文本从show me the video 更改为Submitting...,但它没有将数据发送到app.getresponse.com,也没有重定向到外部站点,例如:@987654324 @。

代码如下:

<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?

【问题讨论】:

    标签: javascript php jquery html


    【解决方案1】:

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

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

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

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

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

    希望有帮助

    【讨论】:

    • 非常感谢,当我尝试在我的表单元素中使用id='webform' 时,当我尝试它时,它不起作用,因为它在更改文本后没有做任何事情.有什么想法吗?
    • 你的意思是什么表单元素我需要添加id='webform'
    • 嗨,大卫,对不起;由于某种原因,我的 jsFiddle 没有更新。我现在已经做到了。是的,您必须将 id 添加到您的表单元素。开始的表单标签看起来像:&lt;form action="https://app.getresponse.com/add_subscriber.html" id="webform" accept-charset="utf-8" method="post"&gt;
    【解决方案2】:

    您可以分配表单ID并调用类似

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

    【讨论】:

    • 如何找到表单的 formId?这是提交按钮&lt;input type="submit" name="elButton" 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;'/&gt;
    • 抱歉迟到了,&lt;form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post"&gt; 这是你的表单,所以在上面创建 id 属性&lt;form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post" id="formID"&gt;
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-10
    • 2016-09-18
    • 2019-12-11
    • 2014-05-27
    • 2019-05-22
    相关资源
    最近更新 更多