-2

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

Rob W
351k87 gold badges811 silver badges683 bronze badges
asked Oct 16, 2011 at 14:51
7
  • add a class name to the input elements and query that Commented Oct 16, 2011 at 14:54
  • How is PHP related to that problem? Commented Oct 16, 2011 at 14:54
  • Please try to keep confusion to a minimum ... Commented Oct 16, 2011 at 14:56
  • @felix ... sorry dude that was a mistake and question is now edited Commented Oct 16, 2011 at 14:57
  • @ esailija :- can you be more descriptive Commented Oct 16, 2011 at 14:59

3 Answers 3

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
Sign up to request clarification or add additional context in comments.

2 Comments

yeah that is required so i have some styles on <p></p> otherwise my form will ugly
@kevin, the start tag <p> is missing.
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.

answered Oct 16, 2011 at 15:03

1 Comment

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

3 Comments

@Š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
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".
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.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.