Obtain values of array with jquery

Question

Let's say i have this form:

    <form method="post" name="b" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='field[0][a]' id='field[0][a]'></td>
        <td>Field B</td>
        <td><textarea name='field[0][b]' id='field[0][b]'></textarea></td>
        <td><button>remove</button></td>
    </tr>
</table>
</div>
<div id="container"></div>
<button id="mybutton">add form</button>

<div align="center">
<p><button onClick="dadosFormulario()" value="Registar" name="registar">Registo</button></p>
</div>
</form>

and i have a jquery function that duplicates the inputs i have when i click the "add form" button. So, regarding that, i'm trying to save the values of the inputs with the .val() method of jquery.

So, if i have an input like this one:

<input type='text' name='teste' id='teste'>

i know that with this:

var v = $('#teste').val();

i can receive her value. However, if i have an array of inputs, and that's my situation since i can duplicate the fields of the form, how can i obtain the multiple values from the following inputs?

<input type='text' name='field[0][a]' id='field[0][a]'>
<input type='text' name='field[0][b]' id='field[0][b]'>

var v = $('#field[iterator][a]').val(); won't work, it results in 'undefined'.

jquery function where i can't get the values from the inputs with the val(); gives undefined:

$countForms = 1;

    (function($){

          $.fn.addForms = function(idform){

                        var myform = "<table>"+
                         "  <tr>"+
                         "     <td>Field A ("+$countForms+"):</td>"+
                         "     <td><input type='text' name='field\\["+$countForms+"\\]\\[a\\]'></td>"+
                         "     <td>Field B ("+$countForms+"):</td>"+
                         "     <td><textarea name='field["+$countForms+"]['b']'></textarea></td>"+
                         "     <td><button>remove</button></td>"+
                         "  </tr>"+
                         "</table>";


                        if(idform=='mybutton'){

                            myform = $(myform);
                            $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
                            $(this).append(myform);
                            $countForms++;
                        }


          };
    })(jQuery);

    $(function(){
        $("#mybutton").bind("click", function(e){
        e.preventDefault();
        var idform=this.id;

            if($countForms<3){
                $("#container").addForms(idform);
            }       
        });
    });

Adil · Accepted Answer · 2012-07-12T17:37:46.380

3

Square brackets are used in jQuery selector and we should use escape characters to include the square bracket in id of control;

Live Demo

iterator = 0;
$('#field\\['+iterator +'\\]\\[a\\]').val();

edited Jul 12 '12 at 17:37

answered Jul 12 '12 at 17:32

Adil

146,340
25
209
204

one more thing, about the inputs i have generated by jquery? i can't declare them like this? ? – user1511579 Jul 12 '12 at 17:45
I do not think so, the statment you sent if it is in html you can not use javascipt variable like that. If you get any problem on the way you can always put a question to ask for solution. – Adil Jul 12 '12 at 18:00
if it's not really rude of my part asking so many questions, i declared an array on the function to save the data from the inputs: var dadosFormulario=new Array(); while(i – user1511579 Jul 12 '12 at 18:11
No problem, these would definitely help http://api.jquery.com/jQuery.each/ and http://api.jquery.com/each/ – Adil Jul 12 '12 at 18:17
Not getting there :/ The links you gave me show me arrays with "pre-declared content". Mine i don't know the lenght of them and i'm having difficult to understand since its a muldimensional array. – user1511579 Jul 12 '12 at 18:32

GTSouza · Answer 2 · 2012-07-12T17:51:33.797

1

Add a class to inputs and do this

jQuery(document).ready(function($){
  $('.inputs').each(function(index, object){
    console.log($(object).val());
  });
});

On your code you need change here:

var v = $('#field[iterator][a]').val();

to:

var v = $('#field\\['+iterator+'\\]\\[a\\]').val();

edited Jul 12 '12 at 17:51

answered Jul 12 '12 at 17:32

GTSouza

365
4
16

i'm having a similar problem but on the jquery function i posted in the end of the main post, if you could help i would appreciate. Thank you. – user1511579 Jul 12 '12 at 17:54
Try change this.id; to $(this).attr('id'); – GTSouza Jul 12 '12 at 17:56
Maybe thats is what you need: http://stackoverflow.com/questions/11443783/jquery-dynamically-added-form-element-data-not-sent-to-database-when-user-is-on/11443961#11443961 – GTSouza Jul 12 '12 at 17:58
i was missing the atribute id on the jquery function, it's solved. thank you – user1511579 Jul 12 '12 at 18:03

score 1 · Answer 3 · answered Jul 12 '12 at 17:42

1

The character "[" is not neutral in jquery selectors :

$('#field[0][a]') means : " select the items which have id "field", and also have an attribute named '0', and another attribute named 'a' "

You can :

either change your way to give an id to your fields, like : id="field_0_a", and thus have $('#field_0_a') work correctly,
or select your items by name : $('[name="field[0][a]"]')
or do like Adil said

answered Jul 12 '12 at 17:42

LeGEC

46,477
5
57
104

LeGec i did like Adil said and it works for the inputs in the html code. However, like i said, i have another problem related to the generated inputs in the other jquery function (i will add the function to the main post). i have them declared like this but it gives undefined as result – user1511579 Jul 12 '12 at 17:50

score 0 · Answer 4 · answered Jul 12 '12 at 17:40

0

The problem is that you have to escape special characters like the following:

$('[id="field[' + iterator + '][b]"]').val();
or
$('#field\\[' + iterator + '\\]\\[b\\]').val();
demo

answered Jul 12 '12 at 17:40

Ricardo Alvaro Lohmann

26,031
7
82
82

Obtain values of array with jquery

4 Answers4

Linked