Getting values from dynamicly created input and select field

Question

So i have this page where people will be able to dynamically created inputs and select fields, and since i don't know how many of inputs and select fields will they create im kinda out of ideas on how would i get the values of every single one of them so i can send them to my php page via ajax.

I thought maybe a good idea would be to try to loop through every div and take values of select and input field, but i don't know how to do that. This is how html looks after user has created couple of inputs and seleect fields:

<div id="izmena_arhitekte">
        <div class="headlinea">Arhitekte</div>
        <div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="Zeljko Bogicevic" id="arh_ime1"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip1" class="form-control upis-style">
      <option selected="" value="Projektant">Projektant</option>
      <option value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div><div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="Nikola Kojic" id="arh_ime2"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip2" class="form-control upis-style">
      <option value="Projektant">Projektant</option>
      <option selected="" value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div>
    <div class="form-group">
    <input type="text" class="form-control upis-style" placeholder="Ime i prezime" value="" id="arh_ime3"> <i title="Obrisi Arhitektu" class="fa fa-times fa-2x deleteArh"></i>
    <select style="margin-top:-18px;" id="tip3" class="form-control upis-style">
      <option value="Projektant">Projektant</option>
      <option value="Pomocni">Pomocni</option>
      <option value="Nadzor">Nadzor</option>
    </select>
    </div>   
    </div>

How is the PHP going to access them? What format does it need to be in when sent via AJAX for the PHP to know what value is which? — Anthony Grist
– Anthony Grist, Commented Dec 15, 2014 at 11:55

vaso123 · Accepted Answer · 2014-12-15 11:48:40Z

2

You can use the $.each(); function of jQuery.

$(function() {
    var collection = $('.form-group');
    var data = [];
    $.each(collection, function(idx, obj) {
        data.push({'input': $(obj).find('input').val(), 'select': $(obj).find('select').val()});
    });
    console.log(data);
});

answered Dec 15, 2014 at 11:48

vaso123

12.4k4 gold badges37 silver badges68 bronze badges

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

5 Comments

Chilipepper Over a year ago

This worked man! I'll get back to you if i get stuck again but i think i should be fine.

Anthony Grist Over a year ago

@Chilipepper If you actually gave your form elements name attributes, jQuery has a function that's intended specifically for generating the data to send via an AJAX request: .serialize(). No need to do it yourself then, unless you need it in a really weird format for your PHP script.

Chilipepper Over a year ago

That's not actually a form since i don't want a page to reload. All i need is those values to be in separate variable which now i will be able to do. But thanks man, i will check out that .serialize()!

Chilipepper Over a year ago

Ok now that i have them in array which looks like this Object1: input: "Zeljko Bogicevic" select: "Projektant" Object2: input: "Nikola Kojic" select: "Pomocni" Object3 How do i put those values in a variable? So i would have name1: Zeljko Bogicevic, name2: Nikola Kojic etc?

vaso123 Over a year ago

After that: $.each(data, function(idx, obj) { console.log(obj.input); console.log(obj.select); });

Haris · Accepted Answer · 2014-12-15 11:49:01Z

0

Give a class to each input or select field which is added dynamically. For example, let's say I am giving the class name "inputField". Then to access all values:

var arr=[];
$(".inputField").each(function(){
    arr.push($(this).val());
});

So now the arr array will have values of all dynamically inserted input fields.

answered Dec 15, 2014 at 11:49

Haris

7671 gold badge7 silver badges10 bronze badges

Comments

Adam · Accepted Answer · 2014-12-15 11:50:13Z

0

Basic approach

Use .each() to loop over each div
Select fields of interest within that div using find()
put data into an array
Ideally use a class on your inputs rather than id then they're easier to select.

Code

var data = [];
$('div.form-group').each(function () {
    data.push({
        name: $(this).find('input').val(),
        project: $(this).find('select').val()
    });
});
console.log(data);

answered Dec 15, 2014 at 11:50

Adam

36.9k9 gold badges104 silver badges145 bronze badges

Comments

baao · Accepted Answer · 2014-12-15 11:55:51Z

0

Using javascript, you can find all the fields with querySelectorAll:

var a = document.querySelectorAll('input[type=text]');
    for (var i = 0;i<a.length;i++){
    console.log(a[i].value);
    }
    var b = document.querySelectorAll('option:checked');
    for (var x = 0;x<b.length;x++) {
    console.log(b[x].value);    
    }
});

You can, for example, put this in a EventListenerfunction and get all the entries on click on a button, or whatever Event you want to listen to

answered Dec 15, 2014 at 11:55

baao

73.6k18 gold badges152 silver badges209 bronze badges

Collectives™ on Stack Overflow

Getting values from dynamicly created input and select field

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related