Get Value from inputs created with Ajax

Question

I've created a form dynamically using Jquery $.get, and now I want to submit the form using another $.get, but the values of my forms fields are coming up as undefined. I've been reading up on how to do it with the .on() handle, but I can't seem to get it to work with my code.

My first script:

function getMark(uslID){
    $('#usOut').html('<p style="text-align:center;"><img src="<?php echo site_url().'images/ajax-loader-fb.gif'; ?>" /></p>');
    $.get("../../class/class.clients.php", {pk: uslID, get: "2"})
    .done(function(data) {
        $("#usOut").html(data);
    });
}

The generated HTML:

<div id="usOut">
  <div style="text-align:center;">
    <h3>Mark US</h3>
    <div id="usl1-contents" class="uslContents styled_form">
      <table width="100%" cellpadding="0" cellspacing="2" border="0" class="uslContentsTable tableMid">
        <tbody>
          <tr>
            <td width="20%"><label for="usl1-certNum">Cert#:</label></td>
            <td><input type="text" id="usl1-certNum" name="usl1-certNum" class="validate[required,minSize[4]]" placeholder="12345" style="width:285px;" required="" /><span class="form_hint">Enter the Certificate Number</span></td>
          </tr>
          <tr>
            <td><label for="usl1-issued">Issued:</label></td>
            <td><input type="text" id="usl1-issued" name="usl1-issued" class="datePicker hasDatepicker" required="" /><img class="ui-datepicker-trigger" src="/portal/images/icons/cal-clock-icon-16x16.png" alt="..." title="..." /><span class="form_hint">Enter the Date the Certificate/Endorsement was Issued</span><input type="hidden" id="altusl1-issued" name="altusl1-issued" class="datePickerAlt" required="" /></td>
          </tr>
          <tr>
            <td><label for="usl1-expiry">Expires:</label></td>
            <td><input type="text" id="usl1-expiry" name="usl1-expiry" class="datePicker hasDatepicker" /><img class="ui-datepicker-trigger" src="/portal/images/icons/cal-clock-icon-16x16.png" alt="..." title="..." /><span class="form_hint">Enter the Date the Certificate/Endorsement Expires</span><input type="hidden" id="altusl1-expiry" name="altusl1-expiry" class="datePickerAlt" /></td>
          </tr>
          <tr>
            <td colspan="2"><input name="doComplete" type="button" id="doComplete" value="Save" class="form-button" onclick="markUS('1')" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

My second script:

function markUS(uslID){
    $('#usOut').html('<p style="text-align:center;"><img src="<?php echo site_url().'images/ajax-loader-fb.gif'; ?>" /></p>');
    var $certNum = $("#usl"+uslID+"-certNum").val();
    var $issuedDate = $("#altusl"+uslID+"-issued").val();
    var $expiryDate = $("#altusl"+uslID+"-expiry").val();
    if($certNum!=undefined && $issuedDate!=undefined || $certNum!="" && $issuedDate!="") {
        $.get("../class/class.clients.php", {pk: uslID, multivalues: $certNum+','+$issuedDate+','+$expiryDate, get: "3"})
        .done(function(data) {                  
            $('#usOut').html('<tr><td colspan="6" style="text-align:center;">'+data+'<br/><img src="<?php echo site_url().'images/ajax-loader-fb.gif'; ?>" /></td></tr>');
            $.get("../../class/class.clients.php", {client: "<?php echo $client_id; ?>", get: "4"})
            .done(function(data) {
                $("#usOut").html(data);
            });
        });
    }
};

The form starts the submit, but the $certNum, $issuedDate, and $expiryDate all come up as undefined. Everything else is fine though. Can anyone explain to me how I might get this to work and why that process works? Thanks. :)

Musa · Accepted Answer · 2014-02-13 22:34:32Z

3

You destroy those elements (with $('#usOut').html) before you can fetch the values from them, retrieve the values then show the loading image.

function markUS(uslID){
    var $certNum = $("#usl"+uslID+"-certNum").val();
    var $issuedDate = $("#altusl"+uslID+"-issued").val();
    var $expiryDate = $("#altusl"+uslID+"-expiry").val();
    $('#usOut').html('<p style="text-align:center;"><img src="<?php echo site_url().'images/ajax-loader-fb.gif'; ?>" /></p>');
    if($certNum!=undefined && $issuedDate!=undefined || $certNum!="" && $issuedDate!="") {
        $.get("../class/class.clients.php", {pk: uslID, multivalues: $certNum+','+$issuedDate+','+$expiryDate, get: "3"})
        .done(function(data) {                  
            $('#usOut').html('<tr><td colspan="6" style="text-align:center;">'+data+'<br/><img src="<?php echo site_url().'images/ajax-loader-fb.gif'; ?>" /></td></tr>');
            $.get("../../class/class.clients.php", {client: "<?php echo $client_id; ?>", get: "4"})
            .done(function(data) {
                $("#usOut").html(data);
            });
        });
    }
}

answered Feb 13, 2014 at 22:34

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dpDesignz Over a year ago

Ah man I'm so stupid! Duh! thanks! :). Should have picked that up.

Collectives™ on Stack Overflow

Get Value from inputs created with Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related