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

时间:2014-02-13 22:30:26

标签: php jquery ajax forms

我已经使用Jquery $ .get动态创建了一个表单,现在我想使用另一个$ .get提交表单,但我的表单字段的值是未定义的。我一直在阅读如何使用.on()句柄,但我似乎无法使用我的代码。

我的第一个剧本:

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

生成的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>

我的第二个剧本:

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

表单会开始提交,但$certNum$issuedDate$expiryDate都会显示为undefined。其他一切都很好。任何人都可以向我解释如何让这个工作以及为什么这个过程有效?谢谢。 :)

1 个答案:

答案 0 :(得分:3)

您可以销毁这些元素(使用$('#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);
            });
        });
    }
}