Question

我有这个动态生成的html

var resultcard = `
    <tr class="tr-shadow">
           <td class="desc">                     
           <span class="block ">
                  ${Name}
               </span>
           </td>
         <td class="desc">
          <input class="au-input au-input--sm" id="qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />

            <a>UI</a>
        </td>
       <td class="desc">
       <input class="au-input au-input--sm" id="price"  type="text" name="search" placeholder="i.e 900" style="width: 90px;" />
       </td>
       <td>
          <span class="status--process">
          <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
          </span>                           
        </td>
      <td class="desc">
      <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;"  />
       </td>
       <td>                               
      <button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>                                 
        </td>
 </tr>

          `
            container.innerHTML += resultcard;

        })

后项功能是这个

function postitem(data){

console.log(data)


  }

单击提交按钮后，如何获取ID为“ qty”和“ price”的输入值？

Answer 1

使用Jquery表单数据：

    $('#myform').serializeArray(); 
   // this method fetch all form data in array of key and value

function postitem(){
var data=$('#myform').serializeArray();
console.log(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <form id="myform">
<tr class="tr-shadow">
           <td class="desc">                     
           <span class="block ">
                  ${Name}
               </span>
           </td>
         <td class="desc">
          <input class="au-input au-input--sm" id="qty" type="text" name="searchqty" placeholder="i.e. 20 EA" style="width: 100px;" />

            <a>UI</a>
        </td>
       <td class="desc">
       <input class="au-input au-input--sm" id="price"  type="text" name="searchprice" placeholder="i.e 900" style="width: 90px;" />
       </td>
       <td>
          <span class="status--process">
          <input class="au-input au-input--sm" type="text" name="searchreports" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
          </span>                           
        </td>
      <td class="desc">
      <input class="au-input au-input--sm" type="text" name="searchdatas" placeholder="Search for datas &amp; reports..." style="width: 90px;"  />
       </td>
       <td>                               
      <button type="button" class="btn btn-primary btn-md" onclick="postitem();">Submit</button>                                 
        </td>
 </tr>
   </form>

Answer 2

下面是一个动态创建新的不可见输入并单击“提交”按钮后显示其值的示例：

window.onload = function(){
  var td = document.createElement("td");
  var tr = document.getElementsByTagName("tr")[0]
  tr.appendChild(td);

  var new_input = document.createElement("input");
  new_input.setAttribute("id", "myId");
  new_input.style.display = "none";
  td.appendChild(new_input);
  new_input.value="my value!";
}

function postitem(){
  var value = document.getElementById('myId').value;
  console.log(value);
  return false;
}

<table>
  <tr class="tr-shadow">
      <td class="desc">
          <span class="block ">
                    ${Name}
                 </span>
      </td>
      <td class="desc">
          <input class="au-input au-input--sm" id="qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />
          <a>UI</a>
      </td>
      <td class="desc">
          <input class="au-input au-input--sm" id="price" type="text" name="search" placeholder="i.e 900" style="width: 90px;" />
      </td>
      <td>
          <span class="status--process">
            <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
            </span>
      </td>
      <td class="desc">
          <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
      </td>
      <td>
          <button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>
      </td>
  </tr>
</table>

如何获取动态生成的输入字段的输入值

2 个答案: