CODEWITHSUNDEEP
phpjavascripthtml
Denver
Denver

Reputation: 35

Place multiple dynamic textboxes into javascript array

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?

Upvotes: 2

Views: 805

Answers (1)

Mariano Desanze
Mariano Desanze

Reputation: 8163

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:

  1. 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.

  2. 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.

  3. 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/

Upvotes: 1

Related Questions