CODEWITHSUNDEEP
javascripthtml
jone2
jone2

Reputation: 191

how to retrieve all the input value in a div class

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?

Upvotes: 0

Views: 2522

Answers (4)

Unmitigated
Unmitigated

Reputation: 89294

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

Upvotes: 0

Nebri
Nebri

Reputation: 833

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.

Upvotes: 0

Azis
Azis

Reputation: 182

Use this to get all values.

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

Upvotes: 2

chevybow
chevybow

Reputation: 11908

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="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>

Upvotes: 0

Related Questions