Iterate through inputs inside of a div
Solution 1
Your inputs are not children of #companyInfo
. Just do this:
$('#companyInfo input').each(function () {
alert(this.value);
});
Solution 2
You can use the find
method, which looks for nested elements at any level:
$('#companyInfo').find('input').each(function () {
alert(this.value);
});
Solution 3
The input
s are not immediate descendants of #companyInfo
. Try this instead:
$('#companyInfo input').each(function () {
console.log($(this).val());
});
Solution 4
From the jQuery documentation:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree
Classes make a great way to implement multi-element operations quickly.
Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>
Then use .each to iterate by class:
$(document).ready(function() {
$('body').on('click', '#sendButton', function() {
$(' .radioInput ').each(function() {
alert(this.value);
});
});
});
And a jsfiddle for you. Good luck.
Tartar
A software engineering student who is intrested in java technologies and mobile software development.
Updated on June 09, 2022Comments
-
Tartar almost 2 years
I'am trying to iterate through all inputs which are placed on a specific div via jQuery, but there is no response. I can't see the values of inputs by using alert. What am I doing wrong ?
<form id="internshipStage2Form" method="POST" action="form2.php"> <center> <table id="studentInformation" border="1"> <caption style="color:#f00;">Student(Trainee) Information</caption> <tr> <td valign="middle" align="center"> <label id="stuEmailLabel" for="stuEmailText">E-mail Address</label> </td> <td valign="middle" align="center"><?php echo $email; ?></td> </tr> <tr> <td valign="middle" align="center"> <label id="stuPhoneLabel" for="stuPhoneText">Phone</label> </td> <td><input id="stuPhoneText" type="text" name="stuPhoneText"/></td> </tr> </table> <div id="companyInfo"> <table id="companyInformation" border="1"> <caption style="color:#f00;">Company Information</caption> <tr> <td valign="middle" align="center"> <label id="companyNameLabel" for="companyNameText">Company Name</label> </td> <td><input id="companyNameText" type="text" name="companyNameText"/></td> </tr> <tr> <td valign="middle" align="center"> <label id="companyAdressLabel" for="companyAdressText">Address</label> </td> <td><input id="companyAdressText" type="text" name="companyAdressText"/></td> </tr> <tr> <td valign="middle" align="center"> <label id="companyPhoneLabel" for="companyPhoneText">Phone</label> </td> <td><input id="companyPhoneText" type="text" name="companyPhoneText"/></td> </tr> <tr> <td valign="middle" align="center"> <label id="" for="">Did the any students work as trainees in the company in the previous years?</label> </td> <td valign="middle" align="center"> Yes<input id="g1Positive" type="radio" name="g1" value="YES"/> No<input id="g1Negative" type="radio" name="g1" value="NO"/> </td> </tr> </table> </div> <h4 style="color:#f00;"> I agree the terms. </h4> <input id="stuDecCheckBox" type="checkbox" name="stuDecCheckBox" /></br> <input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/> </center> </form>
JS
$('#companyInfo').children('input').each(function () { alert(this.value); });
Any help would be appriciated.