append element don't show up on submit

Question

I made an object in javascript that append a table with 5 elements. However when I submit the form the added fields don't show up.

var whenCellOne = firstRow.insertCell(1);
this.often = document.createElement("select");
this.often.name = "['"+me.id+"']['often']";
this.often.appendChild(this.createOption("Vecka", "0"));
this.often.appendChild(this.createOption("Månad", "1"));
this.often.onchange = function(){ me.update(); };
whenCellOne.appendChild(this.often);

That's how I create one of the elements, I expect it comming up as $_POST['1a']['often'] = "0" but the var_dump just looks like this array(1) { ["submit"]=> string(2) "ok" } what's wrong? and how do I fix it?

Here is the full javascript code http://pastebin.com/Jai3gChv , and here is the test page http://pastebin.com/F3rgBumh

Answer 1

PHP will not populate $_POST with data from fields with names of the form [something] . You need to change the name.

If you want $_POST['1a']['often'] to have a value then you need name="1a[often]" .

Assuming the value of me.id is 1a , you are currently setting it to name="['1a']['often']"

this.often.name = "['"+me.id+"']['often']";

should be

this.often.name = me.id + "[often]";

Answer 2

You have also a couple of errors in your script, you have to still implement the bug fixes mentioned by Quentin:

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <script type="text/javascript" src="./system/advancedDate.js"></script>
        </head> 
        <body>
            <form action="#" method="POST">
                <div id='1a'></div>
                <input type="submit" name="submit" value="ok">
            </form>
        </body>
        <footer>
            <script type="text/javascript">
              window.onload = function(){
                var ad = new advancedDate("1a");
                ad.appendInElement();
              }
            </script>
        </footer>
</html>





function advancedDate(id){
    this.id = id;
    this.createDOMElements();
}

advancedDate.prototype.createDOMElements = function(){
    var me = this;
    this.table = document.createElement("table");
    this.table.style.border = "Solid black 3px";

    //Create row 1
    var firstRow = this.table.insertRow(0);
    var secondRow = this.table.insertRow(1);
    var thirdRow = this.table.insertRow(2);
    var fourthRow = this.table.insertRow(3);

    var whenCellOne = firstRow.insertCell(0);
    this.repeat = document.createElement("select");
    this.repeat.name = "['"+me.id+"']['repeat']";
    this.repeat.appendChild(this.createOption("Varje", "0"));
    this.repeat.appendChild(this.createOption("Kommande", "1"));
    whenCellOne.appendChild(this.repeat);

     whenCellOne = firstRow.insertCell(1);
    this.often = document.createElement("select");
    this.often.name = "["+me.id+"][often]";
    this.often.appendChild(this.createOption("Vecka", "0"));
    this.often.appendChild(this.createOption("Månad", "1"));
    this.often.onchange = function(){ me.update(); };
    whenCellOne.appendChild(this.often);

    secondRow.insertCell(0);
    var dateCell = secondRow.insertCell(1);
    this.when = document.createElement("select");
    this.when.name = "['"+me.id+"']['when']";
    this.when.setAttribute("multiple","true");
    this.when.style.width = "300px";
    dateCell.appendChild(this.when);

    var dayCell = thirdRow.insertCell(0);
    dayCell.innerHTML = "Day:";

    var dayInputCell = thirdRow.insertCell(1);
    this.dayInput = document.createElement("input");
    this.dayInput.name = "['"+me.id+"']['when']";
    this.dayInput.setAttribute("type", "text");
    this.dayInput.onkeyup = function(){ me.update(); };
    this.dayInput.onblur = function(){ me.update(); };
    dayInputCell.appendChild(this.dayInput);

    var workCell = fourthRow.insertCell(0);
    workCell.innerHTML = "Arbetstid:";

    var workTimeInputCell = fourthRow.insertCell(1);
    this.workTimeInput = document.createElement("input");
    this.workTimeInput.name = "['"+me.id+"']['workTime']";
    this.workTimeInput.setAttribute("type", "text");
    this.workTimeInput.onkeyup = function(){ me.calculateTime(this); };
    this.workTimeInput.onblur = function(){ me.calculateTime(this); };
    workTimeInputCell.appendChild(this.workTimeInput);

    this.update();
};

advancedDate.prototype.createOption = function(text, value){
    var e = document.createElement("option");
    e.setAttribute("value",value);
    e.innerHTML = text;
    return e;
};

advancedDate.prototype.calculateTime = function(element){
    var pattern = /([0-9]{2}):([0-9]{2})([^0-9]+)([0-9]{2}):([0-9]{2})/g;
    if(element.value.match(pattern)){
        var result = pattern.exec(element.value);
        var time1 = (parseInt(result[1]) * 3600) + (parseInt(result[2]) * 60);
        var time2 = (parseInt(result[4]) * 3600) + (parseInt(result[5]) * 60);

        var max = Math.max(time1, time2);
        var min = Math.min(time1, time2);
        var time = max-min;

        element.value = Number((time/3600).toFixed(2));
    }
};

advancedDate.prototype.update = function(){

    var currentDay;

    try{
        currentDay = parseInt(this.dayInput.value);
    }catch(err){
        currentDay = -1;
    }

    var d = new Date();
    var month = d.getMonth();
    var year = parseInt(d.getFullYear())+1;
    var day = d.getDate();

    var months = [
        ["01, Januari",     "January",      0],
        ["02, Februari",    "February",     1],
        ["03, Mars",        "March",        2],
        ["04, April",       "April",        3],
        ["05, Maj",         "May",          4],
        ["06, Juni",        "June",         5],
        ["07, Juli",        "July",         6],
        ["08, Augusti",     "August",       7],
        ["09, September",   "September",    8],
        ["10, Oktober",     "October",      9],
        ["11, November",    "November",     10],
        ["12, December",    "December",     11]];

    var weeks = [
        ["Måndag",  "Monday"    ],
        ["Tisdag",  "Tuesday"   ],
        ["Onsdag",  "Wednesday" ],
        ["Torsdag", "Thursday"  ],
        ["Fredag",  "Friday"    ],
        ["Lördag",  "Saturday"  ],
        ["Söndag",  "Sunday"    ]];


    //Save the selected values
    var selected = [];
    try{
        for(var i=0; i<this.when.options.length; i++){
            if(this.when.options[i].selected)
                selected.push(this.when.options[i].value);
        }
    }catch(err){

    }

    if(this.often.value === "0"){
        this.when.options.length = 0;
        for(var x=0; x<weeks.length; x++)
            this.when.appendChild(this.createOption(weeks[x][0], weeks[x][1]));
        //Make extra invisable
        this.table.rows[2].style.display = 'none';
        this.dayInput.value = "";
    }

    if(this.often.value === "1"){
        this.when.options.length = 0;
        for(var y=0; y<months.length; y++)
            this.when.appendChild(
                this.createOption(
                    ((month > months[y][2] || (month === months[y][2] && currentDay < day)) ? year+ "-" : "") + months[y][0], months[y][1]));
        this.table.rows[2].style.display = 'table-row';
    }

    //Load selected again
    for(var z=0; z<this.when.options.length; z++){
        for(var j=0; j<selected.length; j++){
            if(this.when.options[z].value === selected[j]){
                this.when.options[z].selected="selected"; break;
            }
        }
    }

    //Dynamic height
    this.when.size = this.when.options.length;
};

advancedDate.prototype.appendInElement = function(){
    var e = document.getElementById(this.id);
    e.appendChild(this.table);
};

append element don't show up on submit

Question

2 answers

solution1
1 ACCPTED 2015-04-08 08:52:00

solution2
1 2015-04-08 09:12:08

append element don't show up on submit

Question

2 answers

solution1 1 ACCPTED 2015-04-08 08:52:00

solution2 1 2015-04-08 09:12:08

solution1
1 ACCPTED 2015-04-08 08:52:00

solution2
1 2015-04-08 09:12:08