Place multiple dynamic textboxes into javascript array

Question

The following code only stores one textbox into an array. I'd like to have a multidimensional array that stores multiple dynamic textboxes on the fly.

The code currently asks the user for 4 inputs and i use a % to concatenate it into one string and post it to a php page.

I'd like it to take all 4 inputs and store them in an array that has each dynamically added textboxes stored as follows:

name[0][0] = dmenuvalue;  
name[0][1] = $name.val();  
name[0][2] = $origprice.val();  
name[0][3] = $specprice.val();

then when the user adds another it would be

name[1]0] = dmenuvalue, etc,etc

working code:

$(function(){
   var $name = $("#name");
   var $origprice = $("#origprice");
   var $specprice = $("#specprice");
   var $add = $("#add");
   var $list = $("#list");
   var ctr = 0;
   $add.click(function() {
    ctr++;
    var elem = document.createElement("div");
    var hidden = document.createElement("input");
    var close = document.createElement("a");
    var dmenu = document.getElementById("days");
    var dmenuvalue = dmenu.options[dmenu.selectedIndex].text;
    var regex  = /^\d+(?:\.\d{0,2})$/;
    if(dmenuvalue != "temp" && $name.val().indexOf("%") == -1 &&  ($origprice.val().indexOf("%") == -1 && regex.test($origprice.val())) && ($specprice.val().indexOf("%") == -1 && regex.test($specprice.val())))
    {
        var name = dmenuvalue +"%"+ $name.val() + "%" + $origprice.val()  + "%" + $specprice.val();
        //var name[0][0] = dmenuvalue;
        //var name[0][1] = $name.val();
        //var name[0][2] = $origprice.val();
        //var name[0][3] = $specprice.val();
        //for(i=0;i<5;i++){
               $(hidden).attr({
               'type': 'hidden',
               'name': 'name[]',
               'value': name
               });
          // }
           $(close).attr({
           'href': '#'
           }).html("X").click(function() {
           $(elem).remove();
           ctr--;
           return false;
           });
           $(elem).html(name).append(hidden)
           .append(close);
           $list.append(elem);
        document.getElementById("dailydeals").innerHTML = '';
           return false;
    } else {
        document.getElementById("dailydeals").innerHTML = '*Please complete all required fields above.';
        return false;
    }
   });
});

Could somebody please help me modify the code to be multidimensional?

Could you check your question? I've just edited to bring your code inline with your question (incidentally, to do that yourself take a read of the mark-down help), and I'd appreciate your reviewing, just to be sure I've not made a hideous mistake somewhere. Thansk! — David Thomas
– David Thomas, Commented Oct 10, 2012 at 22:30
It looks good David, thanks. I was trying to place it by copying it within the code section but it didn't work... weird. — Denver
– Denver, Commented Oct 10, 2012 at 22:35
@Denver: What is the purpose of separating your values with % into one long string (i.e., var name = dmenuvalue +"%"+ $name.val() + "%" + $origprice.val() + "%" + $specprice.val();)? — pete
– pete, Commented Oct 11, 2012 at 3:15

Mariano Desanze · Accepted Answer · 2012-10-11 05:46:34Z

1

In order to make a multidimensional array just create a normal array outside the click event:

var dailyDeals = [];

Then (inside the click event) create another array and push it into the parent array:

var dailyDeal = [
    dmenuvalue,
    $name.val(),
    $origprice.val(),
    $specprice.val()
];
dailyDeals.push(dailyDeal);

But I don't think you really need this nested array (at least from I understood from your code) as all you need is the inner array to create the hidden inputs:

for (i = 0; i < 4; i++) {
    $('<input type="hidden">').attr({
        'name': 'name[' + ctr + '][' + i + ']',
        'value': dailyDeal[i]
    }).appendTo(elem);
}

My recomendations:

Move the ctr++; line inside the if which makes the validation. And put it below everything else if you want your controls to start at 0 instead of 1.
Don't do ctr-- inside your click handler of the X button. Because you'll have problems if the user deletes any other row but the last one, and then user adds another row. I would leave the array to have empty holes and then handle it on server side.
Remove the name="days" attribute from the <select> tag. Otherwise it will be submitted.

JSFiddle to look at the full source and test the submitted values:

http://jsfiddle.net/protron/xGhnv/4/

edited Oct 11, 2012 at 5:46

answered Oct 11, 2012 at 5:37

Mariano Desanze

8,2587 gold badges49 silver badges72 bronze badges

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

3 Comments

Denver Over a year ago

Thanks for the tips. This works flawlessly. I notice that your jsfiddle still uses the name with the %'s appended to be displayed. How would I break that up into a table where I could print it out such as <tr><td>dmenuvalue</td><td>$name.val()</td></tr>, etc.

Mariano Desanze Over a year ago

That seams like another question. Please create another question on SO and link it here if you want me to see it. Regards

Denver Over a year ago

Thanks question asked at stackoverflow.com/questions/12867117/…

Collectives™ on Stack Overflow

Place multiple dynamic textboxes into javascript array

1 Answer 1

My recomendations:

JSFiddle to look at the full source and test the submitted values:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

My recomendations:

JSFiddle to look at the full source and test the submitted values:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related