CODEWITHSUNDEEP
javascriptphpjqueryajaxiframe
JayVicious
JayVicious

Reputation: 25

iFrame passing information to Ajax and triggering the submit button in the Ajax

I'm having a problem where the Ajax is not triggering the respected event.

I have two forms, one visible and one hidden.

  1. In the visible form, the user can enter an email address.
  2. When the user clicks the submit button of the visible form, the default submit is prevented, and through Ajax the email is validated.
  3. If the email address is not valid, an error message will appear.
  4. If the email address IS valid, the submit button of the hidden form should be clicked using JS (in the ajax-success function).

Here is more code for reference:

HTML

Visible Form

<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="https://app.getresponse.com/add_contact_webform.html?u=IzDa" method="post">
    <input class="wf-input wf-req wf-valid__email" type="text" name="email" data-placeholder="yes" id="email" value="Enter Your Email Here" 
        onfocus="if (this.value == 'Enter Your Email Here') {this.value = '';}" 
        onblur="if (this.value == '') {this.value = 'Enter Your Email Here';}" 
        style="margin-top:0px;" />
    <br />
    <input type="submit" class="wf-button" name="submit1" value=" " style="display:inline !important; margin-top:-10px !important;" />    
</form>

Hidden Form

<form method="post" id="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl">
    <div style="display:none;">
        <input type="hidden" name="meta_web_form_id" value="947846900" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="awlist3599001" />
        <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
        <input type="hidden" name="meta_adtracking" value="ibb_test" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="email" />
        <input type="hidden" name="meta_tooltip" value="" />
    </div>

    <div id="af-form-947846900" class="af-form"><div id="af-body-947846900"  class="af-body af-standards">
        <div class="af-element">
            <label class="previewLabel" for="awf_field-66127140">Email: </label>
            <div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value=""  />
            </div><div class="af-clear"></div>
        </div>
        <div class="af-element buttonContainer">
            <input name="submitaw" id="submitaw" class="submitaw" type="submit" value="Submit" tabindex="501" />
            <div class="af-clear"></div>
        </div>
        </div>
    </div>

    <div style="display:none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>

JS

Ajax for visible form

$('#contactForm1').click(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var self = this;

    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: 'check.php',
        data: {
            email: email
        },
        success: function (data) {
            if (data.status == 'success') {
                self.submit();
            } else {
                alert('The e-mail address entered is not valid.');
            }
        }
    });
});

So here's how the scenario would be:

  1. User enters email address, and clicks the submit button.
  2. Ajax-call checks whether it's a valid email.
  3. If the email is valid, the Ajax success function of the visible form
    • first sets the email value of the hidden form
    • and then triggers the submit button of the hidden form

As said before, STEP 3 isn't working.

Upvotes: 0

Views: 648

Answers (1)

Nurdin
Nurdin

Reputation: 23883

use complete instead success

$('#contactForm1').click(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var self = this;
    $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: 'check.php',
        data: {
            email: email
        },
        complete: function(data) {
            if (data.status == 'success') {
                self.submit();
            } else {
                alert('The e-mail address entered is not valid.');
            }
        }
    });
});

Upvotes: 0

Related Questions