Generating a form dynamically in javascript

Question

Hey all Trying to generate a 1-button form that will go in a cell of a table. The catch is that this needs to be generated dynamically in javascript. The table has a couple other values. I did the table first without the form part and everything was working fine... Now the table doesn't generate at all.

I know the way I'm generating the form is incorrect but I'm not sure why.... Please help!

Thanks

function populateInventory() {
        clearTable();  //This works
        var artistIndex = byId('artist').selectedIndex;
        var albumIndex = byId('albumSelect').selectedIndex;
        var inventoryArray = inventoryNames[artistIndex][albumIndex];

        for (i = 0; i < inventoryArray.length; i++) {
            var idValue = inventoryArray[i][2];
            var conditionValue = inventoryArray[i][3];
            var priceValue = inventoryArray[i][4];

            var table = byId('table');
            var row = table.insertRow(i + 1);

            var submitCell = row.insertCell(0);
            var idCell = row.insertCell(1);
            var conditionCell = row.insertCell(2);
            var priceCell = row.insertCell(3);

//Begin problem?!
                var form = document.createElement("form");
                form.method = "post";
                form.action = "<?php echo $_SERVER[PHP_SELF];?>";
                var inventoryIdElement = document.createElement("<input name='inventoryIdElement' type='hidden' value='" + idValue + "' ></input>");
                form.appendChild(inventoryIdElement);
                var submitElement = document.createElement("<input name='submit' type='submit' value='Remove' ></input>");
                form.appendChild(submitElement);

            //End problem?!
            var idElement = document.createTextNode(idValue);               
            var conditionElement = document.createTextNode(conditionValue);                 
            var priceElement = document.createTextNode("$" + priceValue);               

            submitCell.appendChild(form);
            idCell.appendChild(idElement);
            conditionCell.appendChild(conditionElement);
            priceCell.appendChild(priceElement);
        }
    }

rsp · Accepted Answer · 2011-02-28 05:28:32Z

2

Have you considered using a good library for DOM manipulation, like jQuery, YUI, Prototype, Dojo, Ext, etc.? It would make your life much easier for this sort of things.

answered Feb 28, 2011 at 5:28

rsp

112k31 gold badges210 silver badges185 bronze badges

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

2 Comments

Craig Over a year ago

I have... however I need to get this finished quickly and don't have time to learn that. I will definitely move to something like this after this deadline. This is the final javascript piece missing..

Robin van Baalen Over a year ago

In my opinion and experience; beginners tend to learn a library like jQuery much faster than vanilla javascript.

Keith · Accepted Answer · 2011-02-28 06:27:30Z

0

I don't think you are using createElement properly there. It takes just the tag name, not the whole markup.

answered Feb 28, 2011 at 6:27

Keith

43.2k11 gold badges61 silver badges77 bronze badges

2 Comments

Craig Over a year ago

changed it to be like this.. var inventoryIdElement = document.createElement("input"); inventoryIdElement.name = "inventoryIdElement"; inventoryIdElement.type = "hidden"; inventoryIdElement.value = idValue; form.appendChild(inventoryIdElement); Still fail... :(

Craig Over a year ago

The form action gets printed properly. This is in a php file.

Collectives™ on Stack Overflow

Generating a form dynamically in javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related