click on a submit button is not working

Question

I need some help with my code. I have a problem with click on a submit button after I have put my name and email in the email text fields. When I click on a submit button, it will change the text in the button from show me the video to Submitting..., but it did not send the data to app.getresponse.com and it did not redirect to a external site, example: www.google.com.

Here is the code:

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

I guess the problem is something have to do with the code on css that would not let me to send the data to app.getresponse.com and then redirect to a external site.

Can you please help me with how to make the submit button to work that will change the text and send the data to app.getresponse.com and then redirect my site to google.com?

Answer 1

In the final line after validations, you have included

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

But, a form with id webform does not exist in your html. Check the corrected source code, which seems to work (of course, submission wont work on jsdfiddle as its cross origin).

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

Or add id='webform' to your form element. That should do.

Hope that helps

Answer 2

You can assign ID of form and call like

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