Getting the value of a dynamically created input - php

Question

I have following jquery script which load a form into a div "blankform"
jQuery('#metentry').submit(function(e){
e.preventDefault();
// getting data from form to variables
var date = jQuery('#stddate').val();
var kgsunit = jQuery('#unit').val();
var kgsshift = jQuery('#shift').val();
//sending data to script
jQuery.post("get_blank_form.php", {
"date": jQuery('#stddate').val(),
'unit': kgsunit,
'shift': kgsshift,
}, function(data) {
//loading a form to the div blankform
jQuery('#blankform').html(data);
});
get_blank_form.php contains following code
<?php
echo'<form id="shiftentry" name="shiftentry" >';
echo "Date:<input id=shiftdate value='".$date."'/>";
echo "Unit:<input id=shiftdate value='".$unit."'/>";
echo "Shift:<input id=shiftdate value='".$shift."'/><br/>";
echo "<table><tr><th>No</th><th>Ele</th><th>Location</th><th>Dose Rate (mGy/h)</th><th> Tritium (DAC)</th> <th>Part (DAC)</th> <th>Iodine (DAC)</th><th> Surface Cont. (Bq/cm2) </th></tr>";
while($row2 = mysql_fetch_array($result_sec))
{
echo "<tr>";
echo "<td>".++$rc."</td>";
echo "<td><input size='5' id='".$row2['elevation']."' value='".$row2['elevation']."' /></td>";
echo "<td><input id='".$row2['loc_id']."' value='".$row2['location']."' /></td>";
echo "<td><input size='5' id='dose".$rc."' value='".$row2['radn_level']."'/></td>";
echo "<td><input size='5' id='h3".$rc."' value='0' /></td>";
echo "<td><input size='5' id='part".$rc."' value='0' /></td>";
echo "<td><input size='5' id='iod".$rc."' value='0' /></td>";
echo "<td><input size='5' id='cont".$rc."' value='0' /></td>";
echo "</tr>";
}
echo " </table>";
echo '<div align="center">';
echo '<input type="submit" id="submit" name="submit" value="Submit" width="30" />';
echo '</div>';
?>
this will create a form which will have input like id1, id2 ... id25, dose1, dose2 ... dose25 and so on.
I want to read the values of these input boxes. Normal method like var loc1 = $("#id1").val(); is not working since these elements are dynamically created.
Even the submit button clicking even is also not triggered.
the script below do not produce any output.
jQuery('#shiftentry').submit(function(e) {
e.preventDefault();
alert("Submitted");
Any suggestions please?

Answer 1

Since the Form DOM is dynamically created after Ajax Call, You can use .on ?
like:
$(document).on('submit' , '#shiftentry' , function(e) {
e.preventDefault();
alert("Submitted");
});

Answer 2

You will need to use on() method for event handling as the form is created using ajax call and added later.
As it's added later, it will not be bound to submit event handler that you had specified. To bind it with the handler you need to use on() from jQuery.
$(document).on('submit', '#shiftentry', function() {
//Your code
});

Answer 3

As for the submit button, you can trigger it using
$('#submit_id').on('click', function(){
$('#shiftentry').send(function(e) {
e.preventDefault();
alert("Submitted");
);
})
as for getting the values using.
$('#id1').val()
this should just work just fine but remember that some characters are not permitted in id field such as [, ], . etc.. if you cant avoid this special characters in your id field you can use.
$('input[name="value"]').val();
to get the value of your fields.