how do i get value to my array from each loop if the inner elements were different

Question

I am in the middle of this js from morning everytime i think it is going to be completed i get another block. What i am trying to get is the values from the different elements like some of them are <input type="text"> and others were <select> here is my code

var eduarray = [];
    $('.education-groupbox').each(function(index, el) {
        eduarray[index] = [];   
        var s = $(this).attr('id');
        //console.log();
        $('#'+s+' .inputs').each(function(key, value) {

            //console.log($(this).children('.seviyeoptions').val());
            if(key == 1)
            {

                eduarray[index][key].push($(value).children('.seviyeoptions').val());
            }

        });

    });

and here is the html part

<div id="education-groupbox" class="education-groupbox">
  <div class="inputs col-3">
    <label for="email">Seviye</label>
    <select class="seviyeoptions" name="" id="">
      <option value="option one"></option>
      <option value="option one">Option One</option>
      <option value="option two">Option Two</option>
    </select>
  </div>
  <div class="inputs col-3">
    <label for="email">Okul Adı</label>
    <input type="text" name="email" />
  </div>
  <div class="inputs col-3">
    <label for="email">Bölüm</label>
    <input type="text" name="email" />
  </div>
  <div class="inputs col-3">
    <label for="email">Mezuniyet Yılı</label>
    <select class="mezuniyetoptions" name="" id="">
      <option value="option one"></option>
      <option value="option one">Option One</option>
      <option value="option two">Option Two</option>
    </select>
  </div>
</div>

I want to get all the values from the all form elements which are in .inputs class block. please advice.

"like some of them are and others were here is my code" ? Could you please try to write properly, because understanding your question isn't easy. — Jeremy Thille, May 20 '17 at 17:34
sorry for the confusion some words were removed by stackoverflow as i guess they were code ..let me edit the question again — Rohit Poonia, May 20 '17 at 17:37
Wrap those code words with ` backticks ` , the key is located top left of keyboard. — zer00ne, May 20 '17 at 17:39
got it and corrected thanks :) please check now if it is understandable — Rohit Poonia, May 20 '17 at 17:40
@vlk i am using key from here `$('#'+s+' .inputs').each(function(key, value) {` is it wrong ? — Rohit Poonia, May 20 '17 at 17:44

Arun Sivan · Answer 1 · 2017-05-20T17:58:47.010

Assuming that you know id of available select boxes and input fields in the template

Sample Code

$("button").click(function(){

var map={};
var arrayList=[];
map.selectOne=$("#selectOne").val();
map.selectTwo=$("#selectTwo").val();
map.email=$("#email").val();
arrayList.push(map);
console.info(arrayList);
console.log(map);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <label>selectOne</label>
 <select   id="selectOne">
 <option value="option one">Option One</option>
 <option value="option one">Option Two</option>
 <option value="option two">Option Three</option>
 </select>
 <br>
 
  <label>selectTwo</label>
  <select id="selectTwo">
  <option value="option one">Option One</option>
 <option value="option one">Option Two</option>
 <option value="option two">Option Three</option>
  </select> 
   <br>
   <label for="email">Email</label> <input id="email" type="text" name="email" />
 <br>
<button>submit</button>

Junius L · Accepted Answer · 2017-05-20T18:41:23.057

Give your div's ids, your current selector $('#'+s+' .inputs').each(function(key, value) { won't work as there are no id on your div which have class inputs.

$('#get').on('click', function () {
        var eduarray = [];
        $('.education-groupbox').each(function (index, el) {
            eduarray[index] = [];
            var s = $(this).attr('id');
            //console.log();
            $('#' + s + ' .inputs').each(function (key, value) {
              if ($(this).find('select').length) {
                  eduarray[index].push($(this).find('select > option:selected').val());
              }
              if ($(this).find('input').length) {
                  eduarray[index].push($(this).find('input').val());
              }
            });

            console.log(eduarray);
        });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
    <div id="select" class="inputs col-3">
        <label for="email">Seviye</label>
        <select class="seviyeoptions" name="" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
    <div id="input" class="inputs col-3">
        <label for="email">Okul Adı</label>
        <input type="text" name="email"/>
    </div>
    <div id="input2" class="inputs col-3">
        <label for="email">Bölüm</label>
        <input type="text" name="email"/>
    </div>
    <div id="input3" class="inputs col-3">
        <label for="email">Mezuniyet Yılı</label>
        <select class="mezuniyetoptions" name="" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
</div>
<button id="get">Get values</button>

UPDATE

You can also use an object/associative array instead of a standard array, and set the object properties with the value of the name attribute of each element.

$('#get').on('click', function () {
        var eduarray = {};
        $('.education-groupbox').each(function (index, el) {
            var s = $(this).attr('id');
            //console.log();
            $('#' + s + ' .inputs').each(function (key, value) {
              if ($(this).find('select').length) {
                  eduarray[$(this).find('select').attr('name')] = ($(this).find('select > option:selected').val());
              }
              if ($(this).find('input').length) {
                  eduarray[$(this).find('input').attr('name')] = ($(this).find('input').val());
              }
            });

            console.log(eduarray);
        });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
    <div id="select" class="inputs col-3">
        <label for="email">Seviye</label>
        <select class="seviyeoptions" name="seviyeoptions" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
    <div id="input" class="inputs col-3">
        <label for="email">Okul Adı</label>
        <input type="text" name="email"/>
    </div>
    <div id="input2" class="inputs col-3">
        <label for="email">Bölüm</label>
        <input type="text" name="email2"/>
    </div>
    <div id="input3" class="inputs col-3">
        <label for="email">Mezuniyet Yılı</label>
        <select class="mezuniyetoptions" name="mezuniyetoptions" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
</div>
<button id="get">Get values</button>

check the length of the array `.length` http://stackoverflow.com/questions/2672380/how-do-i-check-if-a-javascript-array-value-is-empty-or-null — Junius L, May 20 '17 at 18:25
`if (eduarray == undefined || eduarray == null || eduarray.length === 0 || (eduarray.length == 1 && eduarray[0] == "")) { alert('s'); }else{ alert('a'); console.log(eduarray); }` — Rohit Poonia, May 20 '17 at 18:28
this part `eduarray.length == 1 && eduarray[0] == ""` makes it fail — Junius L, May 20 '17 at 18:34

how do i get value to my array from each loop if the inner elements were different

2 Answers2