JQuery - How to submit dynamically created form?

Question

I am having trouble when submitting a dynamically created form.

This is how I create the form after a radio button is checked:

$(document).ready(function(){

     $('input[name$="rad-tweet"]').click(function(){

      var radio_value = $(this).val();

      if(radio_value==='hash') {
      $('#mainform2').empty();
           $('#mainform2').remove();
        $('#radio-buttons').after('<form  action="" id="mainform" method="POST" ></form>');
         $('#mainform').append('<label class="label" for="Location" >&nbsp;&nbsp;Location</label>'+
                '<input class ="text-box" type="text" name="Location" id="Location"/>'+
                '<label class="label" for="Since" >Since</label>'+
                '<input  class ="text-box" type="text" name="Since" id="Since" />'+

                '<select name="Time" id="Time" style="width:80px;">'+
                    '<option value="MINUTE">Minute(s)</option>'+
                    '<option value="HOUR">Hour(s)</option>'+
                    '<option value="DAY">Day(s)</option>'+
                    '<option value="WEEK">Week</option>'+
                '</select>'+
                '<label class="label" for="Time" >Ago&nbsp;</label>'+
                 '<label class="label" for="Limit" >Up to</label>'+

                '<input class ="text-box" type="text" name="Limit" id="Limit" />'+
               '<label class="label" for="Limit" >Results&nbsp;</label>'+
                '<input class ="submit-button" type="submit" id="submitButton" value="Get Hashtags" style="width:95px;" />');




      }
      else if(radio_value==='trends') {
          $('#mainform').empty();
           $('#mainform').remove();
          $('#radio-buttons').after('<form  action="" id="mainform2" method="POST" ></div>');
          $('#mainform2').append('<label class="label" for="Location" >&nbsp;&nbsp;Location&nbsp;</label>'+
                '<input class ="text-box" type="text" name="Location" id="Location"/>&nbsp;&nbsp;'+
                '<input class ="submit-button" type="submit" id="submitButton" value="Get Trends" style="width:95px;" />');

       }
      });

This code follows the code above, and I try to make an XHR request to a php script when the from #mainform is submitted.

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

            if(runProgram()){
                //Loading div. To be hidden upon sucessful ajax. Disable submit button
                document.getElementById("Loading").style.visibility="visible";
                document.getElementById("submitButton").disabled=true;


                $.ajax({
                     url: "indexProgram.php",
                     type: 'POST',
                     data: $(this).serialize(),

                     success:function(data, textStatus, jqXHR){
                        //take away loading div and reenable submit.
                        document.getElementById("Loading").style.visibility="hidden";
                        document.getElementById("submitButton").disabled=false;


                        var arr = data.split(",-,");

                        BeginTime = arr[3];

                        if(!(/^\s*$/).test(arr[0])) {


                        var lookAt = ge.createLookAt('');


                        data_array = arr[4].split("|");
                        alert(data);

                        // Set the position values.
                        lookAt.setLatitude(parseFloat(arr[0]));
                        lookAt.setLongitude(parseFloat(arr[1]));
                        //lookAt.setLatitude(43.653226);
                        //lookAt.setLongitude(-79.3831843);
                        lookAt.setTilt(50.0);
                        lookAt.setRange(9000.0); //default is 0.0

                        // Update the view in Google Earth.
                        ge.getView().setAbstractView(lookAt);
                        }
                        else{

                        alert("Location does not exist. Please try again with an existing Location")

                        }



                    },
                    complete : function(){

                        modDom(data_array);

                    }
                });


            }


            //doesn't refresh pag
            return false;
        });



      });

Before, when the form was static, the ajax xhr call completed successfully, now it doesn't. I have been reading about what the issue might be, and about how the form is not in the DOM, and to use .live, and I have tried, but it still does not work.

Could somebody please help me out?

Answer 1

Your problem is that in the first place your document loads then jquery code is loaded. Then you create a dynamically created form which jquery does not get to post. Instead remove $('document').ready() and put a function let suppose submit_form(). call this form on the click event of you form and your form will be submitted. Another approach is that when dynamically you are creating form element assign them all an class. Before submitting the form loop through with this class to get all values and append the with the serialize form to submit.

Answer 2

Your answer lies in the depths of the Live event handler for jquery.

http://docs.jquery.com/Events/live

I don't really remember all that well, but i think its got to do something with the click event handler not binding dynamic elements, but the Live event handler does it, so try using that.

UPDATE

Sorry, its seem that the Live() event handler has been deprecated in the latest jQuery.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

The alternative is to use the jquery On() event handler. http://api.jquery.com/on/

EXAMPLE USAGE

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});