Ajax creates form based on value but will not submit

Question

Ok so here is the scenario : The app is built with Ajax requesting How many services do we need ? ( I don't validate anything for this purpose but I should )

Say we give five as an input the form return with 5 boxes and a submit button

<script>
    function test(){
        var num = $('#numServ').val();
        var form = "";

        form += "<form name='form2' id='services' method='POST' action='<?php echo $_SERVER['PHP_SELF'];?>'>";
        for(m=0;m<num;m++){
            // alert("<br>Voice le param"+m);
            form += "<br><input type='text' name='services"+m+"' value=''>";
        }
        form += "<input type='submit' name='services' id='btnServices' value='SERVICES'>";

        form += "</form>";
        alert(form);
        $('#generated').append(form)
    }
</script>

This part works ... but when I try to submit the form usin Ajax which the function for this Ajax call was place in the document.ready function it jst doesn't work.

$('#form2').submit(function(){
    alert("Form Submitted");

    /*
    THE WHOLE CODE COMMENTED OUT IT STILL WON'T WORK
    var result = $(this).serialize();

    alert(result);
    $.ajax({
        url:"./content.php",
        data: result, 
        type: "POST",
        // cache:false,
        dataType:"html",
        success: function(data,jqXHR){$('body').append(data);},
        error: function(){alert('Check Ajax request');},
        complete:function(){alert("Ajax complete");}
    });
    */

    return false;
});

I have been at it for days now. Any other forms that are not built using jquery will work using this method as the form is already loaded on the page and not beeing made by ajax on the fly.

I believe my issue lies with Ajax making the form after the page has been loaded ... even though my Ajax call to sumit the form is in the head inside the document.ready function.

Any ideas ?

losthorse · Accepted Answer · 2013-04-07 01:57:16Z

1

jQuery is listening for a submit event on an element with in ID of form2 but your form is named services.

Also, it looks like you are building the form dynamically, so the submit event may not fire because the jQuery loads before the form exists.

If this is the case, try using $(#[ID of parent element that exists on page load]).on('submit', function() {...});

Update

jQuery .on() documentation has lots of good info. The short version is that events "bubble" up the DOM. By adding the listener to an element that exists on page load, it can catch events that happen to it's children.

It looks like you are appending the form to an element with an ID of "generated"... if this element exists on page load then the following should work:

$('#generated').on('submit', function() {
    alert("Form Submitted");

    var result = $(this).serialize();

    alert(result);

    $.ajax({
        url:"./content.php",
        data: result, 
        type: "POST",
        // cache:false,
        dataType:"html",
        success: function(data,jqXHR){$('body').append(data);},
        error: function(){alert('Check Ajax request');},
        complete:function(){alert("Ajax complete");}*/
    });

    return false;
});

edited Apr 7, 2013 at 1:57

answered Apr 7, 2013 at 0:43

losthorse

1,5701 gold badge13 silver badges35 bronze badges

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

4 Comments

hayonj Over a year ago

thats exactly what i think is happening .... can you elaborate a little more on this function $(#[ID of parent element that exists on page load]).on('submit', function() {...});

losthorse Over a year ago

@hayonj I have updated my answer with some more info and included your original code.

hayonj Over a year ago

that does work ! so if i understand correctly, I cannot submit a form with Ajax unless the container in this case a DIV was loaded on the page load Also what i weird is the $('#generated').on('submit', function() { instead of using the actual ID of the form instead.

losthorse Over a year ago

It's more broad then just submitting a form. This is true for any event you want to listen for in the DOM (like submit, click, etc.)

xkickflip · Accepted Answer · 2013-04-07 00:39:32Z

0

Your jQuery is looking for a form with id='form2' but your form creation function is setting id='services' So the jQuery isn't running because it isn't matching anything.

change:

$('#form2').submit(function(){

to:

$('#services').submit(function(){

answered Apr 7, 2013 at 0:39

xkickflip

7686 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ajax creates form based on value but will not submit

2 Answers 2

Update

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related