Ajax中的Javascript请求不通过jQuery从动态创建的输入字段中看到值

时间:2017-06-22 20:47:14

标签: javascript php jquery ajax wordpress

我在下午用谷歌搜索了一下,我发现了包含我问题元素的东西,但没有任何东西可以打到头上。我尝试过改编几件事,但无济于事。 javascript触发,但无法读取动态创建的字段的值。

这里的总体目标是我们有一个网页来将承包商添加到数据库中。我们输入的其中一个字段是跟踪人们的贴纸编号。不用说,我们不希望人们有重复的贴纸号码。我没有在提交时抛出他们的输入,而是使用ajax请求验证条目(代码改编自ajaxrequest.js中的Chirp Internet)。我有那个工作。它会返回一条错误消息,通知您贴纸编号BLAH已在使用中。表单字段甚至被代码清除,因此人们不会输入他们应该输入的数字。真正的扭曲来自我在表格底部的按钮。它克隆最后一行输入,删除任何标签(对于第一行),清除几个字段,并将其附加到容器div。

这是我在php中生成的html

<div class=\"input_fields_row\">
                <div class=\"row addCont\">
                    <div class=\"col-md-2\">
                        <label>First Name:</label>
                        <div><input type=\"text\" name=\"contFirstName[]\" class=\"cst_inputBox form-control\"/></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Last Name:</label>
                        <div><input type=\"text\" name=\"contLastName[]\" class=\"cst_inputBox form-control\"/></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Company:</label>
                        <div><input type=\"text\" name=\"contCompany[]\" class=\"form-control\" /></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Employee Contact:</label>
                        <div><input type=\"text\" name=\"compContact[]\" class=\"form-control\" /></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Sticker Number</label>
                        <div><input type=\"text\" name=\"stickerNum[]\" class=\"cst_inputBox form-control\" id=\"stickerBox\" onchange=\"checkUniq(this.name, this.value, " . $moduleAccess[0]->cloudID . ", this.id);\"/></div>
                    </div>
                </div>
            </div>

这是我的js创建动态行

jQuery(document).ready(function() {
 var max_fields      = 20; //maximum input boxes allowed
 var wrapper         = jQuery(".input_fields_wrap"); //Fields wrapper
 var add_button      = jQuery(".add_field_button"); //Add button ID
 var tableRow        = jQuery(".input_fields_row:last"); //row to copy


 var x = 1; //initlal text box count
 //Add Container Size
 jQuery(add_button).click(function(e){ //on add input button click
     e.preventDefault();
     if(x < max_fields){ //max input box allowed
         x++; //text box increment
         var newTableRow = tableRow.clone();
         newTableRow.find(".cst_inputBox").val("")
         newTableRow.find(".cst_inputBox").attr('id', 'stickerBox' + x);
         newTableRow.find('div').find('div').find('label').remove();
         jQuery(wrapper).append(newTableRow.find('div:first').append('<a href="#" class="remove_field">Remove</a>')); //add input boxes
     }
 });
 jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
     e.preventDefault(); 

     jQuery(this).parent('div').remove();
     x--;
 })

});

这是从checkuniq.php

调用的ajax请求部分
case "setvalue":
      var target = getNodeValue(commands[i], "target");
      var value = getNodeValue(commands[i], "value");
      if(target && value !== false) {
        var el = document.getElementById(target);
        if(el) {
          el.value = value;
        } else {
          console.log("Cannot target missing element: " + target);
        }
      }
      break;

这是由

引起的
if( $stmt->fetchColumn() > 0 ) {
    $xml->command('alert', array('message' => "$value is a Duplicate Sticker Number!" . $stmt->fetchColumn()));
    $xml->command('setvalue', array('target' => "$targetIdField", 'value' => "",));
}

对于最初在表单上的输入行,它清除它没有问题,只是动态添加的那些我什么都没得到。 我可以使用警告框输出目标,并且它具有正确的ID,但是当我使用警报给我值时(在我将其设置为空之前)它什么都没有显示。
我假设它类似于javascript无法看到动态创建的输入的值。我遇到了为动态字段实现自动完成的相同问题,但我无法通过观看我认为的课程来解决这个问题。
任何帮助将不胜感激。我们在一周内推出,为什么这不重要,它肯定会在顶部额外洒上。

0 个答案:

没有答案