从使用Ajax创建的输入中获取值

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.

我已经使用Jquery $动态创建了一个表单。get，现在我想用另一个$来提交表单。get，但是表单字段的值是未定义的。我一直在研究如何使用.on()句柄进行操作，但我似乎无法让它与我的代码一起工作。

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:

生成的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. :)

表单开始提交，但是$certNum、$发行日和$到期日期都是未定义的。其他的都没问题。谁能给我解释一下我是如何让这个过程起作用的以及为什么这个过程起作用?谢谢。:)

1 个解决方案

#1

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

在您可以从这些元素中获取值之前，您需要销毁这些元素(使用$('#usOut').html)，检索值，然后显示加载图像。

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