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
– Jeremy Thille, Commented May 20, 2017 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
– Rohit Poonia, Commented May 20, 2017 at 17:37
Wrap those code words with ` backticks ` , the key is located top left of keyboard. — zer00ne
– zer00ne, Commented May 20, 2017 at 17:39
got it and corrected thanks :) please check now if it is understandable — Rohit Poonia
– Rohit Poonia, Commented May 20, 2017 at 17:40

Junius L · Accepted Answer · 2017-05-20 18:41:23Z

1

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>

edited May 20, 2017 at 18:41

answered May 20, 2017 at 18:07

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

5 Comments

Rohit Poonia Over a year ago

how do i check if eduarray is empty ?

Junius L Over a year ago

check the length of the array .length stackoverflow.com/questions/2672380/…

Rohit Poonia Over a year ago

if (eduarray == undefined || eduarray == null || eduarray.length === 0 || (eduarray.length == 1 && eduarray[0] == "")) {  		alert('s'); 	}else{ 		alert('a'); 		console.log(eduarray); 	}

Rohit Poonia Over a year ago

doing this to check but it always runs else condition

Junius L Over a year ago

this part eduarray.length == 1 && eduarray[0] == "" makes it fail

Arun Sivan · Accepted Answer · 2017-05-20 17:58:47Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related