how to retrieve input from a certain html id
Question
I have this html
<div class="table-responsive table-responsive-data2">
<table class="table table-data2" id="resulttable" style="display: block;">
<thead>
<tr>
<th>NSN</th>
<th>Name</th>
<th>QTY</th>
<th>Price ($)</th>
<th>Manufacturer</th>
<th>Part Number</th>
<th>Shipping</th>
</tr>
</thead>
<tbody id="producttable">
<!-- -->
<form id="myform0"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>123
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(123)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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;">
</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 & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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(0)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
<form id="myform1"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>343
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(343)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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;">
</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 & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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(1)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
<form id="myform2"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>212
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(212)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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;">
</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 & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</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(2)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
</tbody>
</table>
and I have a function that is triggered from the dynamically created created html
function postitem(index) {
var formid='#myform'+index
$('input').each(function(index){
console.log($(this).val());
});
}
the selector $('input') captures all the input value in the html, what I really want is for it to capture only the input within a given #id. So I tried
$('#myform1 input').each(function(index){
console.log($(this).val());
});
and
$(formid).('input')
and none of them yielded any result. How can implement retrieving a input within a div id?
3 answers
solution1
0 2018-07-10 11:04:55
You can access the input very much directly without using the parent $("#idInput") or for accessing it through parent you can use $('#myform1 #idInput') . But make sure you have defined the ids of the element at the time of generation.
There is another way of doing it you can use it as array $('#myform1 input')[index] . Note the index should be the desired number of appearance your input.
solution2
0 2018-07-10 11:09:34
try this:
$("input").parent( "#myform1" );
solution3
0 2018-07-11 22:17:28
As i said in my comment, your javascript codes are true. but there is two problem that cause you have not any result:
#myform1is blank.In another form you have some
inputcontrols, but they have not any value.
Below I added an input with some value to your form #myform1 and test your code:
$('#myform1 input').each(function(index){ console.log($(this).val()); });
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <form id="myform1"><input value="Some Thing" /></form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to retrieve an array from within a document that matches a certain ID?
How to send input from html to backend and retrieve output from mongodb and send it to html from the backend?
How to retrieve an id of an html element in JavaScript
How to retrieve text from an input
how do i retrieve input values from different websites without knowing the id or class name of the input field beforehand?
Retrieve input values in td from table without id
HTML: Get value from input with no ID
How do I input text via an HTML form and retrieve data from a JSON file as a response using Javascript?
save page id in cookies and retrieve that certain id's row from database in other page
Retrieve id element from html in C# code MVC .NET?
Related Tags