CODEWITHSUNDEEP
javascripthtmljquery
user13553026
user13553026

Reputation:

How to get next input with name in jQuery?

I have a form like this:

<div class="form-row">
   <div class="form-group col-md-6">
      <label for="registerExtenedFirstName">Vorname</label>
      <input type="text" class="form-control" name="registerExtenedFirstName[]" placeholder="Vorname" required="">
   </div>
   <div class="form-group col-md-6">
      <label for="registerExtenedLastName">Nachname</label>
      <input type="text" class="form-control" name="registerExtenedLastName[]" placeholder="Nachname" required="">
   </div>
</div>
<div class="form-row">
   <div class="form-group col-md-6">
      <label for="registerExtenedFirstName">Vorname</label>
      <input type="text" class="form-control" name="registerExtenedFirstName[]" placeholder="Vorname" required="">
   </div>
   <div class="form-group col-md-6">
      <label for="registerExtenedLastName">Nachname</label>
      <input type="text" class="form-control" name="registerExtenedLastName[]" placeholder="Nachname" required="">
   </div>
</div>

I try to push like this, the first and last name to an dict:

      $('input[name^="registerExtenedFirstName"]').each(function() {
        participants.push({
          key: $(this).val() + $(this).find('input[name^="registerExtenedLastName"]').val(),
          value: $(this).val() + ' ' + $(this).find('input[name^="registerExtenedLastName"]').val()
        });
      });

But, when I have names like this

Thomas Müller
Bernd Maier

after the push I have this:

(2) [{…}, {…}, {…}]
0: {key: "ThomasMüller", value: "Thomas Müller"}
1: {key: "BerndMüller", value: "Bernd Müller"}

it pushes only from the first the registerExtenedLastName to every array, and I don't why

Upvotes: 0

Views: 131

Answers (2)

Anton
Anton

Reputation: 472

I would use another approach - search by div.form-row. Here is the example code:

$('.form-row').each(function() {
  participants.push({
    key: $(this).find('input[name^="registerExtenedFirstName"]').val() + $(this).find('input[name^="registerExtenedLastName"]').val(),
    value: $(this).find('input[name^="registerExtenedFirstName"]').val() + ' ' + $(this).find('input[name^="registerExtenedLastName"]').val()
  });
});

Upvotes: 1

user13553026
user13553026

Reputation:

Ok, I could fix it. I had to search in the next DOM element like this:

      $('input[name^="registerExtenedFirstName"]').each(function() {
        participants.push({
          key: $(this).val() + $(this).closest('div').next('div').find('input[name^="registerExtenedLastName"]').val(),
          value: $(this).val() + ' ' + $(this).closest('div').next('div').find('input[name^="registerExtenedLastName"]').val()
        });
      });

Upvotes: 0

Related Questions