Jquery Dynamically Created Inputs Not Posting

I have a form that has inputs being created dynamically with Jquery. If I hardcode an element exactly like it is being created with Jquery, I get the POST data fine. But when the e

Solution 1:

I'd like to ask you for some more details, but stack overflow won't let me.

Anyways, if you're handling the POST on a submit event through jQuery, chances are that you're not binding the event to dynamically added forms.

For example, if you bind the event to forms this way:

$("form").on("submit", function(){
    //do POST stuff
})

It will only attach the event to forms that were in the DOM at the time you bind the event.

In order to bind events to dynamic elements, you must do it through a non-dynamic element. For example, let's say your forms are wrapped inside a div with id forms-container. Then you could attach the event like this:

$("#forms-container").on("submit", "form", function(){
    //do POST stuff
})

This way the event would be attached to all elements inside #forms-container, including the ones which are dynamically added.

Solution 2:

As I suspected, it was a delegation issue, but I still don't quite understand it.

This works -

$('#reg_form').on('submit', function(event){
    var address = $('input[name=address]').val();
    var city = $('input[name=city]').val();
    var state = $('select[name=state]').val();
    var zip = $('input[name=zip]').val();
   var format_address = address + '+' + city + '+' + state + '+' + zip;
   var password = $('input[name=password]').val();
   var password_verify = $('input[name=confirm_password]').val();
   var email = $('input[name=email]').val();
   var confirm_email = $('input[name=confirm_email]').val();
   if(email != confirm_email){
       event.preventDefault();
       $('.text-danger').show();
       $('.text-danger').html('Email Address does not match.');
  }
  if(password != password_verify)
 {
    event.preventDefault();
    $('.text-danger').show();
    $('.text-danger').html('Password does not match.');
 }
//call google maps api 
$.getJSON( "https://maps.googleapis.com/maps/api/geocode/json?address=" + format_address, function( data ) {
  console.log(data.results[0].geometry.location.lat);
  console.log(data.results[0].geometry.location.lng);
//populate form fields    
  $('input[name=lat]').val(data.results[0].geometry.location.lat);
  $('input[name=lng]').val(data.results[0].geometry.location.lng);
  });

  $(this).unbind('submit');
});

If I take out that unbind, the form does not post the dynamically generated values. I had tried a few things likes doing this in the very beginning -

$('.form_container').on('submit', 'form', function(event){

and I tried a few other things can't thing of right now..binding preventdefault, unbinding preventdefault.

But like I said, this above code with the unbind works. Maybe someone who knows about about binding and delegation more than me can weigh in on it.