如何在div类中检索所有输入值

Question

I tried to retrieve all the input value in this tr class

            <tr class="tr-shadow" id="myform">

                     <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 qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />
                                            </td>
                                             <td class="status--process" >
                                                 <input class="au-input au-input--sm" type="text" name="search" placeholder="shipping cost" style="width: 120px; height: 30px;"  /><br>
                                            <select name="selectSm" id="SelectLm" class="form-control-sm form-control" style="width: 120px;">

                                                   <option value="0">Please select</option>
                                                    <option value="1">Option #1</option>
                                                    <option value="2">Option #2</option>
                                                    <option value="3">Option #3</option>
                                                    <option value="4">Option #4</option>
                                                    <option value="5">Option #5</option>
                                                </select>
                                            </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-md" onclick="postitem()">Submit</button>
                                            </td>
                                        </tr>

I tried using this function

function postitem(index) {
   var formid='#myform'
    var panel= $(formid);
    var inputs = panel.find("input");
    console.log(inputs.value)

   }

but the text value are not being retrieved. What am I doing wrongly and how can I retrieve the text value for all the input?

Answer 1

使用它来获取所有值。

$('input').each(function(index){ console.log($(this).val()); });

Answer 2

Use id's for the input fields and then get the value of the element at that id. You can do this like so, using the first input field as an example:

 function postitem(){ console.log(document.getElementById('first_input').value); } 

  <tr class="tr-shadow" id="myform"> <td> <span class="status--process"> <input class="au-input au-input--sm" id = 'first_input' 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 qty" type="text" name="search" placeholder="ie 20 EA" style="width: 100px;" /> </td> <td class="status--process" > <input class="au-input au-input--sm" type="text" name="search" placeholder="shipping cost" style="width: 120px; height: 30px;" /><br> <select name="selectSm" id="SelectLm" class="form-control-sm form-control" style="width: 120px;"> <option value="0">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> <option value="4">Option #4</option> <option value="5">Option #5</option> </select> </td> <td> <button type="button" class="btn btn-primary btn-md" onclick="postitem()">Submit</button> </td> </tr> 

Answer 3

I would put a class on each input control you want to capture, then use that class to select only the inputs that you want. For example I used .captureInput, and placed that class on each input and your select element.

function postitem() {               
  $('#myform').find('.captureInput').each(function() {
    console.log($(this).val());
  });
}

This will get you all of the values.

Answer 4

With pure javascript, using document.getElementsByTagName :

function findAll(){
var inputs = document.getElementsByTagName('input');
 for(var i = 0; i < inputs.length; i++){
   console.log(inputs[i].value);
  }
}