JQuery - How to submit a dynamically generated form?

I am having problems submitting a dynamically generated form.

This is how I create the form after checking the radio button:

$(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 above code and I am trying to make an XHR request to a php script when submitted from #mainform.

$('#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 the form was static, the ajax xhr call succeeded, now it is not. I read about what could be the problem and how the form is not in the DOM and use .live and I tried but it still doesn't work.

Can someone please help me?

+3


source to share


2 answers


Your problem is that first of all your document is loaded, then the jquery code is loaded. Then you create a dynamically generated form that jquery doesn't receive to post. Remove $ ('document') instead. Ready () and put the let submit submit_form () function. name this form in the click event of your form and your form will be submitted. Another approach is that when dynamically creating a form element, the entire class is assigned to them. Before submitting the form loop using this class to get all the values ​​and add them with the form to submit.



+1


source


Your answer lies deep in the jquery Live event handler.

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

I don't remember all of this very well, but I think it should do something with the click event handler not related to dynamic elements, but the Live event handler does it, so try using that.

UPDATE

Sorry, it looks like the Live () event handler has been deprecated in the latest jQuery.



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

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

EXAMPLE OF USE

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

      

0


source







All Articles