Reading all input types withing a parent div with jquery

Question

I have an add Email button, on clicking on that I would like to read all the email address text box values and then pass it to the ajax call. I have the same kind of parent div s repeated once for an applicant context and another for a contact context. I would like to read just only those emails that are near to the clicked button, i.e, if i click Add button under applicant only the emails of the applicant should be read, if i click on button under the contact, only those emails should be read.

Here is html for the applicant

<div id="divEmailPartial">
  <div id="divEmailRows">
  <div class="row" id="divEmail" style="">
    <div class="col-md-4">
            <div class="margin-bottom-10">
                <input class="form-control valid" id="Emails_0__EmailAddress" maxlength="30" name="Emails[0].EmailAddress" type="text" value="">
            </div>
        </div>
    </div>
    <div class="row" id="divEmail" style="">
        <div class="col-md-4">
                <div class="margin-bottom-10">
                    <input class="form-control valid" id="Emails_1__EmailAddress" maxlength="30" name="Emails[1].EmailAddress" type="text" value="">
                </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-link glyphicon glyphicon-plus-sign clsAddEmail" name="actionType" value="AddEmail" id="btnAddEmail"> add</button>
        </div>
</div>

</div>

<div id="divEmailPartial">
  <div id="divEmailRows">
  <div class="row" id="divEmail" style="">
    <div class="col-md-4">
            <div class="margin-bottom-10">
                <input class="form-control valid" id="Emails_0__EmailAddress" maxlength="30" name="Emails[0].EmailAddress" type="text" value="">
            </div>
        </div>
    </div>
    <div class="row" id="divEmail" style="">
        <div class="col-md-4">
                <div class="margin-bottom-10">
                    <input class="form-control valid" id="Emails_1__EmailAddress" maxlength="30" name="Emails[1].EmailAddress" type="text" value="">
                </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-link glyphicon glyphicon-plus-sign clsAddEmail" name="actionType" value="AddEmail" id="btnAddEmail"> add</button>
        </div>
</div>

</div>

Here is my jquery that i used

    var emailsList = new Array();

// if i use this I wouldn't get any thing

    var emailRows = $(this).closest("#divEmailRows :input[type='text']");

    var emailRows = $("#divEmailRows :input[type='text']"); //this includes all inputs (applicants & contacts)
    emailRows.each(function () {
        var email = $(this).val();
        var controlId = $(this).attr("id");
        var controlName = $(this).attr("name");
        emailsList.push({ 'EmailAddress': email, 'ControlId': controlId, 'ControlName': controlName });
    });
    return emailsList;

Kindly help me how to read all the input text values with jquery.

Thanks

Tarak

`input:text` should select all the text boxes, or put a common class on them and use that instead. As you have it `.form-control` would work, but I usually shy away from using plugin classes in my selectors, opting for classes I create myself that should not change, and are more readable. — Taplar, Apr 17 '18 at 21:55
Hi Taplar, I just updated my query with further more detail, can you look once and help me this regards, thanks — Tarak, Apr 17 '18 at 22:04
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Apr 17 '18 at 22:05
You cannot repeat ids on a page. It's invalid markup. Change them to classes. — Taplar, Apr 17 '18 at 22:05
Ok I can change them to classes, can you help me with the jquery script code. — Tarak, Apr 17 '18 at 22:07
If you changed `id="divEmail"` to `class="divEmail"` every where then it could be `$('.divEmail input')` to select all of them. — Taplar, Apr 17 '18 at 22:09

Aossey · Answer 1 · 2018-04-19T00:27:52.413

Based on the HTML that you provided, you would need to first find the outermost div. In this case is it would be the parent of the parent of the button. You can get an object's parent in jQuery by using parent() method. So greatgrandparent would be the id of the outermost div in your example. NOTE: I have used class property to find the div parents of the button because they don't have id's in your HTML.

var parent = $("#btnAddEmail").parent().prop("class");
var grandparent = $("." + parent).parent().prop("class");
var greatgrandparent = $("#" + grandparent).prop("id");

Once you have the outermost tag, you would look for child input elements and iterate through them to check if they are text inputs and act on the email address value of each.

$('#' + greatgrandparent).find("input").each(function () {
    if($(this).is( ":text" )){
      var emailAddress = $(this).val();//this is the value in the textbox
      //...do something with the email address
    }
});

@Tarak, I edited the answer and tested with your HTML. Make sure that you correct your duplicate id's, as Taplar pointed out in the comment above. See complete jfiddle here: https://jsfiddle.net/hxy6581p/22/ — Aossey, Apr 19 '18 at 00:30

score 0 · Accepted Answer · answered Apr 19 '18 at 22:03

thanks for your response, with the idea you gave me I changed the ids to class and finally i could get my problem resolved. This is what I've done.

var emailsList = new Array();
var emailRows = $(this).closest("div.divEmailPartial").find("div.divEmailRows :input[type='text']");
emailRows.each(function () {
var email = $(this).val();
var controlId = $(this).attr("id");
var controlName = $(this).attr("name");
emailsList.push({ 'EmailAddress': email, 'ControlId': controlId, 'ControlName': controlName });
    });
console.log(emailsList);

Now I can get the emails that are available in the add button nearest to the add on which it is clicked.

Reading all input types withing a parent div with jquery

2 Answers2