Get the variable out of each loop function

Question

Ok this might have asked several times I have checked all solutions but cannot get my head around it.. Please help me to figure this one out.

Run each loop on form ID and get all input fields which have a specific name.
Access the result from outside the loop function.

HTML Code is

<input type="radio" name="position" id="left">
<input type="radio" name="position" id="center">
<input type="radio" name="position" id="right">

Below is the loop code.

    var inputType = $('#form-main input[name="position"]').each(function(){
        inputType = $(this).attr('id');           
        console.log('Data Types are : ' + inputType);
    });

When console.log is placed inside the loop or function I get [left, center, right ]

How can I access this result outside the function or the loop. When console.log is placed outside the loop or function I get [object object]

The right thing to do would be to leave a comment on the answer closest to solving it for you and ask for clarification. The ***wrong*** thing to do is to pollute SO with duplicate questions just because you don't currently understand the answers. — paxdiablo, Dec 07 '15 at 07:06
You need to create an array outside (before) of the loop, then you can add elements to it from within your loop. — Rob, Dec 07 '15 at 07:07

score 1 · Accepted Answer · edited May 23 '17 at 11:59

For you, based on your knowledge of JavaScript (JQuery) I would create a variable outside of the loop and populate it for example:

var dataType = [];
$('#form-main input[name="position"]').each(function(){
        dataType.push($(this).attr('id'));           
    });
console.log('Data Types are : ' + dataType);

There are ways to significantly shorten and optimize your code, if you want some more advanced options then check this page out, but this answer should serve your purpose and help to understand what is going on bit better.

Also a good debate about where you should declare variables in JavaScript here.

UPDATE

$('#form-main input[name="position"]').each(function(){
            var value = $(this).attr('id');
            if (value != null) // if the value isn't null
            dataType.push(value);           
        });
    console.log('Data Types are : ' + dataType);

Again there are better ways of doing this but this is the easiest to read and learn from IMO, there is tonnes of material around about these topics if you have a quick Google search

Hey Thanks for this solution it works great. This is the result i am seeing in console.log(dataType); Is there a way to make the empty once go away? ' dataTypes : left, center, right dataTypes : dataTypes : ' — Vinay, Dec 07 '15 at 08:10
Perfect Thanks! the earlier solution also worked fine then i figured out that since the pages were loading in iframe the js script was returning empty values for iframe. — Vinay, Dec 07 '15 at 08:35
No problem, I do recommend doing some reading or watching some tutorials around the topic, it makes a huge difference :) @Vinay — hjardine, Dec 07 '15 at 08:36

Jai · Answer 2 · 2015-12-07T07:18:58.290

Instead you should use .map() to get the values by creating an array out of element values:

var dataType = $('#form-main input[name="some-type"]').map(function() {
  return this.id;
}).get();

console.log(dataType);

and with native js method .map():

var els = document.querySelectorAll('#form-main input[name="some"]'),
  dataType = [].map.call(els, function(el) {
    return el.id;
  });

document.querySelector('pre').innerHTML = JSON.stringify(dataType);

<form id='form-main' method='post' action='#'>
  <input name='some' id='a'>
  <input name='some' id='b'>
  <input name='some' id='c'>
  <input name='some' id='d'>
</form>

<pre></pre>

Supun Silva · Answer 3 · 2015-12-07T07:30:54.763

In your case, you can use this;

 var inputType = [];
    inputType = $('#form-main input[name="position"]').each(function(){
    inputType = $(this).attr('id');           
    });
 console.log('Data Types are : ' + inputType);

But use the below method as simple;

To get the value of the selected radioName item of a form called 'myForm':

 $('input[name=radioName]:checked', '#myForm').val();

Here's an example: Fiddle

Get the variable out of each loop function

3 Answers3