CODEWITHSUNDEEP
javascriptjqueryhtml
jone2
jone2

Reputation: 191

how to get input value of dynamically generated input field

I have this dynamically generated 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;

        })

the postitem function is this

function postitem(data){

console.log(data)


  }

how do I get the input value for id "qty" and "price" when the submit button is clicked?

Upvotes: 2

Views: 2549

Answers (2)

user6299088
user6299088

Reputation:

Use Jquery Form Data:

    $('#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>

Upvotes: 1

Terry Wei
Terry Wei

Reputation: 1531

Here's an example of creating a new invisible input dynamically and show its value after clicking the submit button:

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>

Upvotes: 0

Related Questions