Making Array in Jquery

Question

I am looking for some urgent help with jquery , i have some input boxes and i want so retrieve their value as an array, the problem is that all the input boxes will be created dynamically with an add more button, so i am not sure how many of they would be, my code to create dynamic boxes is here.

$(function(){
x = 0;
$('#addmore a').live("click",function(){
    x++;
    $('#addmore').append('<input type="text" id="fname_' + x + '"/></p>');      
    return false;
});

});

now let say a person clicked addmore for 3 times now i will have 3 inputboxes with #fname_1, #fname_2 and #fname_3. now i want all the 3 values inside an array.

Thanks

@felix ... sorry dude that was a mistake and question is now edited — Aman Virk
– Aman Virk, Commented Oct 16, 2011 at 14:57

Yousf · Accepted Answer · 2011-10-16 14:56:44Z

1

Add name attribute like this:

$(function(){
x = 0;
$('#addmore a').live("click",function(){
    x++;
    $('#addmore').append('<input type="text" name="fname[]" id="fname_' + x + '"/></p>');      
    return false;
});

});

When you submit, you will have $_POST['fname'], which hold array of your auto-generated input boxes.

By the way, are you sure that you need to put </p> after each input?!

answered Oct 16, 2011 at 14:56

Yousf

4,0133 gold badges29 silver badges38 bronze badges

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

2 Comments

Aman Virk Over a year ago

yeah that is required so i have some styles on <p></p> otherwise my form will ugly

Rob W Over a year ago

@kevin, the start tag <p> is missing.

score 1 · Accepted Answer · 2011-10-16 15:12:35Z

1

You can do it without adding anything (name or class) with such code:

var values = $.map($("#addmore input[id^='fname_']"), function(element, index) {
    return element.value;
});

Live test case.

This will iterate over all inputs with id starting with "fname_" and map their value into single array.

edited Oct 16, 2011 at 15:12

answered Oct 16, 2011 at 15:03

user447356

1 Comment

Šime Vidas Over a year ago

Context please: $( 'input[id^="fname_"]', '#addmore' ). (Doing a page-level query for INPUT elements is not efficient.)

Esailija · Accepted Answer · 2011-10-16 14:59:10Z

0

If this has nothing to do with php:

$(function(){
x = 0;
$('#addmore a').live("click",function(){
    x++; //Add "text-field" class 
    $('#addmore').append('<input type="text" class="text-field" id="fname_' + x + '"/></p>');      
    return false;
});

});


function getFieldValues(){
var r = [];
//Query text field class and push the values into an array
    jQuery( ".text-field").each(
        function(){
        r.push( this.value );
        }

    );

return r; //returns an array with the values
}

answered Oct 16, 2011 at 14:59

Esailija

140k24 gold badges280 silver badges328 bronze badges

3 Comments

Esailija Over a year ago

@Šime Vidas Yeah $ would do here as it's clear it's mapped to jQuery. I always use jQuery out of (good?) habit, since in the wild there are gazillion libraries using $ :P

Šime Vidas Over a year ago

For jQuery code inside the DOM-ready handler (which is where all jQuery code should be anyways), you can use this trick to get the $ name safely: jQuery( function ( $ ) { ... });. Read here under section "Aliasing the jQuery Namespace".

Esailija Over a year ago

It has nothing to do with namespacing but to make it instantly clear to a reader that a piece of code uses jQuery. Also, most of my code is in "class" declarations where it doesn't make any sense to have it in document ready handler.

Collectives™ on Stack Overflow

Making Array in Jquery

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related