无法从动态加载的内容中获取文本框值

Question

With this function the website will load a user profile from actions/create_random_profile.php.

$(function() {
 $('body').on('click','#random_profile',function(){
//var msgid = $(this).attr("id");
//var dataString4 = 'msgid=' + msgid;
$('#random_profile_area_loader').html('<img src="img/loader.gif" class="loading" />'); 
$.ajax({
    type: "POST",
    url: "actions/create_random_profile.php",
    //data: dataString4,
    cache: false,
    success: function(data){
    if (data == 0) {
    $('#random_profile_area').html('Not Sent!');
    } else {
    $('#random_profile_area_loader').html('');
    $('#random_profile_area').append(data);
    }
    }  

});
return false;
});
});

All is fine here. And this is an example from my output coming from create_random_profile.php

</php
Echo '
<div class="col-md-2 created_profile">
/////.......///////
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="text" class="form-control" id="email" name="email" value="'.$email.'">
  </div>
/////.......///////
Echo '<button type="button" class="btn btn-default save_random_profile" id="'.$rand_identifier.'">Create this profile</button>';
</div>';
 ?>

I know that i must have unique id's because multiple script can be triggered. I know how to do that. The problem is here: All variables return undefined values. I tried

$("input#bmonth").val(); 

OR

document.getElementById('bmonth').value; 

or

$("#bmonth").val();

The problem is whorse when i add that unique identifier for each form. Let's say that var unique_identifier = 22 I should use

$("#bmonth"+unique_identifier).val(); 

to get the value from

<input type="text" id="bmonth22" value="3"> 

but it does not work either.

I mention that it works in other script i've made but i can't see the mistake here. I think it happens because the content is dinamically loaded but i am using $('body').on() and it should be fine. Any ideas?

$(function() {
 $('body').on('click','.save_random_profile',function(){
var identifier_id = $(this).attr("id");
 $('.created_profile').html('<img src="img/loader.gif" class="loading" />'); 
// var phcat =  document.getElementById('phcat'+identifier_id).value; 
 //var phcat =  $('#created_profile'+identifier_id).children().document.getElementById('phcat').value;
 var phcat = "man.png";
  var phprofile = "man.png";
/*var phcat =  document.getElementById('phcat').value;
var phprofile =  document.getElementById('phprofile').value;*/

var byear =  $("#byear").val();//document.getElementById('byear').value;
var bmonth =  $("input#bmonth").val();//document.getElementById('bmonth').value;
var bday =  $("input#bday").val();//document.getElementById('bday').value;
var country =  $("input#country").val();//document.getElementById('country').value;
var email =  $("input#email").val();//document.getElementById('email').value;
var password =  $("input#password").val();//document.getElementById('password').value;
var username =  $("input#username").val();//document.getElementById('username').value;
var interested_in =  $("#interested_in").val();//document.getElementById('interested_in').value;
var sex =  $("#sex").val();//document.getElementById('sex').value;
var status =  $("#status").val();//document.getElementById('status').value;
var description =  $("#description").val();//document.getElementById('description').value;
var dataString = 'phcat=' + phcat + '&phprofile=' + phprofile + '&interested_in=' + interested_in + '&sex=' + sex + '&status=' + status + '&description=' + description + '&byear=' + byear + '&bmonth=' + bmonth + '&bday=' + bday + '&country=' + country + '&email=' + email + '&password=' + password + '&username=' + username;
alert(dataString);
$.ajax({
    type: "POST",
    url: "actions/save_random_profile.php",
    data: dataString,
    cache: false,
    success: function(data){
    if (data == 0) {
    $('.created_profile').html('Not Sent!');
    } else {
    $('.created_profile').html(data);
    }
    }  
});
return false;
});
});

Answer 1

The problem is simple.

You are trying to access something which is not there thats why you are getting undefined. You will be able to access $("input#bmonth") only if its present.

From the code you pasted. I think this gets into the dom only after you load a random profile by calling the below url

"actions/create_random_profile.php"

The solution would be to access $("input#bmonth") after you created a random profile.