Extract name attribute for multiple input fields and store in an array without using for loop

Question

I have a form with multiple fields each has a name attribute, how can I extract these name attributes and store in an array or something for future use?

var inputs = $("input[type='text']"),
  outputs = [];
$("#submit").click(function() {
  inputs.each(function() {
    outputs.push(inputs.attr("name"));
  });
  console.log(outputs)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="Forename">
    Forename
  </label>
  <input type="text" id="Forename" name="forename">
</div>
<div>
  <label for="Middlename">
  Middle Names
</label>
  <input type="text" id="Middlename" name="middlename">
</div>
<div>
  <label for="Lastname">
  Lastname
</label>
  <input type="text" id="Lastname" name="lastname">
</div>
<p id="message"></p>
<input type="button" id="submit" value="submit">

outputs is still empty after clicking the button, why are the strings not being pushed into the empty array?

"outputs is still empty after clicking the button" No, it isn't. Your snippet doesn't ever use outputs after clicking the button. I copied it, added console.log(outputs) to just after the each call in the click handler, and outputs has the names in it. Edit: mplungjan changed your snippet to output outputs. Now it has the first name repeated in it, because you're doing inputs.attr("name"), not this.name. Use this.name to access the name for the input the each loop is visiting. — T.J. Crowder
– T.J. Crowder, Commented Nov 19, 2019 at 11:56
Yes I had to add the console.log where I added it. You cannot show it outside the submit — mplungjan
– mplungjan, Commented Nov 19, 2019 at 12:02
@mplungjan - I edited the comment after you edited the snippet. Using this.name does work. — T.J. Crowder
– T.J. Crowder, Commented Nov 19, 2019 at 12:11

mplungjan · Accepted Answer · 2019-11-19 13:47:43Z

1

inputs is a jQuery collection. You will get the first element of that collection every time you only access inputs But if you loop over inputs with each, then $(this).attr("name) or this.name will return the attribute of each element

PS: .each IS a for loop - here is some of the code from the jQuery.js file

if ( isArrayLike( obj ) ) {
  length = obj.length;
  for ( ; i < length; i++ ) {
    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
      break;
    }
  }
}

You have several possibilities

$(this).attr("name") or this.name

var $inputs = $("input[type='text']"),
  outputs = [];
$("#submit").click(function() {
  $inputs.each(function() {
    outputs.push($(this).attr("name")); // $(this) is the input;  this.name works too
  });
  console.log(outputs)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="Forename">
    Forename
  </label>
  <input type="text" id="Forename" name="forename">
</div>
<div>
  <label for="Middlename">
  Middle Names
</label>
  <input type="text" id="Middlename" name="middlename">
</div>
<div>
  <label for="Lastname">
  Lastname
</label>
  <input type="text" id="Lastname" name="lastname">
</div>
<p id="message"></p>
<input type="button" id="submit" value="submit">

accessing the input's DOM node using the parameters passed to the function

var inputs = $("input[type='text']"),
  outputs = [];
$("#submit").click(function() {
  inputs.each(function(_,inp) { // inp is the DOM node
    outputs.push(inp.name);
  });
  console.log(outputs)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="Forename">
    Forename
  </label>
  <input type="text" id="Forename" name="forename">
</div>
<div>
  <label for="Middlename">
  Middle Names
</label>
  <input type="text" id="Middlename" name="middlename">
</div>
<div>
  <label for="Lastname">
  Lastname
</label>
  <input type="text" id="Lastname" name="lastname">
</div>
<p id="message"></p>
<input type="button" id="submit" value="submit">

Use a map:

let outputs;
$("#submit").click(function() {
  outputs = $("input[type='text']").map((_,inp) => inp.name).get()
  console.log(outputs)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="Forename">
    Forename
  </label>
  <input type="text" id="Forename" name="forename">
</div>
<div>
  <label for="Middlename">
  Middle Names
</label>
  <input type="text" id="Middlename" name="middlename">
</div>
<div>
  <label for="Lastname">
  Lastname
</label>
  <input type="text" id="Lastname" name="lastname">
</div>
<p id="message"></p>
<input type="button" id="submit" value="submit">

edited Nov 19, 2019 at 13:47

answered Nov 19, 2019 at 11:56

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

T.J. Crowder Over a year ago

Surely this is more of a comment and close-as-typo situation.

mplungjan Over a year ago

@T.J.Crowder - or a dupe, but I added some more information

one-hand-octopus Over a year ago

What's the difference here between $(this) and directly using the variable inputs? I thought both would work?

mplungjan Over a year ago

Inputs is a jQuery collection. You will get the first element of that collection every time you only access inputs But if you loop over inputs with each then $(this).attr("name) or this.name will return the attribute of each element

Collectives™ on Stack Overflow

Extract name attribute for multiple input fields and store in an array without using for loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related