Jquery form submit not working after form is created after ajax call

Question

The following code submits a form and receives the code for a second form in respose from the server. Which is then displayed in another lightbox. This works correctly:

//submit our optin form when we are using a custom button..
$(".ajax-submit-landing-page-optin-form").click(function (e) {

//close the current lightbox..
$.fancybox.close(); 

//open a new one with a loading gif..
$.fancybox.open([{
    'type': 'inline',
    'content': '<div style="width:"300px;height:300px; class="center"><img src="https://valentte.s3.amazonaws.com/LoadingWheel.gif" style="width:150px;"></div>',
    'closeBtn' : false
}]);

e.preventDefault();
var formID = $(this).attr('href');

$.ajax({
    type: "POST",
    url: '/competitions/enter/<?=(isset($competiton->competition_id)) ? $competiton->competition_id : "";?>',
    data: $(formID).serialize(), // serializes the form's elements.
    dataType:'json',
    success: function(data)
            {
            if(data.result == 'success'){

                //close the current lightbox..
                $.fancybox.close(); 

                //open a new one with some different content..
                $.fancybox.open([{
                    'type': 'inline',
                    'content': data.lightbox_content,
                    'closeBtn' : false
                }]);



                                } else {



                                }                     
                           }
                         });



                });

The second form is displayed in a lightbox and submits correctly if I use a simple "submit" button. Howver if i try to use jquery to submit the form nothing happens. Any help would be appreciated...

relevant jquery is:

                //submit our optin form when we are using a custom button..
                $(".submit-form-with-image-button").on('click', function(e) {

                    e.preventDefault();
                    var formID = $(this).attr('href');
                    $('form'+formID).submit();
                });

Code for the form that gets inserted into the dom is as follows:

        <form action="/auth/create_user" method="post" class="validate-form-new-user-with-first-name form top-space20" style="padding-left:25px;" id="create-account-to-activate-voucher-form">

            <?php //echo validation_errors(); ?>

            <div class="form-field clear">
                <input type="hidden" value="<?=$client->email;?>" name="email" class="required promo-optin fl-space2 size-250" id="email">
                <input type="hidden" value="<?=(isset($client->community_member->first_name)) ? $client->community_member->first_name : '' ;?>" name="first_name" class="required promo-optin fl-space2 size-250" id="optin_first_name">
                <input type="hidden" id="signup_redirect" class="" name="signup_redirect" value="<?=(isset($competition->signup_redirect_url) && $competition->signup_redirect_url != '') ? $competition->signup_redirect_url : '/';?>"/>
                <input type="hidden" id="user_dc" class="" name="user_dc" value="<?=$competition->user_dc;?>"/>
                <input type="hidden" id="user_dc_reason" class="" name="user_dc_reason" value="<?=$competition->user_dc_reason;?>"/>
                <input type="hidden" id="single_use_promotion_code" class="" name="single_use_promotion_code" value="<?=$competition_entry[0]->promotion_code;?>"/>
            </div><!-- /.form-field -->                                 

            <div class="form-field clear bt-space10">
                <label for="textfield" class="size-200" style="position:relative;left:-20px;">Create Password (8-16 characters please) <span class="required">*</span></label>
                <input type="password" id="optin_password" class="required promo-optin fl-space2 size-250 active-input "  name="password" value="<?php //echo set_value('display_position', $landing_page_description->display_position);?>"/>
            </div><!-- /.form-field -->                             

            <div class="form-field" style="position:relative; top:30px; left:-22px;">
                <a class="btn btn-large btn-green center submit-form-with-image-button" style="" alt="Claim my voucher" href="#create-account-to-activate-voucher-form">
                    <span>Start Shopping</span>
                </a>
            </div><!-- /.form-field -->                                                                                             

        </form>

Any help would be really appreciaated...

SOLUTION:

After reading this post Using Jquery, How do I submit a form that was created with AJAX?

I realised that i need to use "live" instead of "on" so corrrcted code is below...

                //submit our optin form when we are using a custom button..
                $(".submit-form-with-image-button").live('click', function(e) {

                    e.preventDefault();
                    var formID = $(this).attr('href');
                    $('form'+formID).submit();
                });

Ramzan Zafar · Accepted Answer · 2014-07-20 10:41:17Z

2

try this $(document).on('submit','#yourFOrm',function(){})

so in your case

   $(".submit-form-with-image-button").on('click', function(e) {

     e.preventDefault();

     //and it should be id instead of href
     var formID = $(this).attr('id');
     $(document).on('submit','form#'+formID,function(){

    // do whatever
    })

 });

edited Jul 20, 2014 at 10:41

answered Jul 20, 2014 at 10:34

Ramzan Zafar

1,6002 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

123dev123 Over a year ago

Just very very much thanks bro! :) I tried around 2 hours to fix it, and just needed reevent :D Easy and perfect!

Collectives™ on Stack Overflow

Jquery form submit not working after form is created after ajax call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related