获取动态创建的输入的值

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");
});