Creating Dynamic User Friendly Form

yomadhu

I created a dynamic form in javascript. Am unable to get those values in to php to display. I need all details. If i add 10 rows the i need to display those all values. Can any one help me for that code.

Expand|Select|Wrap|Line Numbers

 <HTML>

<HEAD>

    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
 
 <script type="text/javascript" src="script.js">
 
// JavaScript Document

var c=0;

        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;

            var row = table.insertRow(rowCount);
 
            var cell1 = row.insertCell(0);

            var element1 = document.createElement("input");

            element1.type = "checkbox";

            cell1.appendChild(element1);
 
             var type=document.forms[0].element.value;

            var value=document.forms[0].field_value.value;

            var name="txt"+c;

            document.forms[0].hid.value="txt"+c;

            var cell2 = row.insertCell(1);

            cell2.innerHTML =document.forms[0].field_name.value;
 
            var cell3 = row.insertCell(2);

            var element2 = document.createElement("input");
 
            element2.setAttribute("type", type);

            element2.setAttribute("value", value);

            element2.setAttribute("name", name);
 
            if(document.forms[0].element.value =='area'){

                var element3 = document.createElement("textarea");

                cell3.appendChild(element3);

                c++;

                document.forms[0].txt.value=c;

            }

            else{

            cell3.appendChild(element2);

            c++;

            document.forms[0].txt.value=c;

            }
 
        }
 
        function setbg(color)

            {
 
            document.getElementById("area").style.background=color

            }
 
        function sz(t) {

            a = t.value.split('\n');

            b=1;

            for (x=0;x < a.length; x++) {

                 if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);

             }

            b+= a.length;

            if (b > t.rows) t.rows = b;

            }
 
        function deleteRow(tableID) {

            try {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {

                var row = table.rows[i];

                var chkbox = row.cells[0].childNodes[0];

                if(null != chkbox && true == chkbox.checked) {

                    table.deleteRow(i);

                    rowCount--;

                    i--;

                    document.forms[0].txt.value=i;

                }
 
            }

            }catch(e) {

                alert(e);

            }

        }
 
</script>

</HEAD>

<BODY><form style="background-color:#F6F7F2; width:100%" action="example_process.php" method="post" name="f1" >

<label>Select Type</label> <SELECT name="element">
 
    <OPTION value="text">Textbox</OPTION>

    <OPTION value="radio">Radio</OPTION>

    <option value="checkbox">Check Box</option>

     <OPTION value="area">Area</OPTION>
 
</SELECT>

<label>Name</label>

<input type="text" name="field_name" value="">

<label>Value</label>

<input type="text" name="field_value" value="">

    <INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />
 
    <INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
 
    <TABLE id="dataTable" width="350px" border="0">

        <TR>

               <td> </td>

        </TR>

    </TABLE>
 
    <INPUT  align="right" type="submit" value="Save" />

    <input type="hidden" name="txt"/>

    <input type="hidden" name="hid"/>

<textarea id="area" name="info" style="visibility:hidden;" onFocus="this.value=''; setbg('#e5fff3');" onBlur="setbg('white');"onkeyup="sz(this);">Enter your comment here...</textarea>

 </form>

</BODY>

</HTML>

Dormilich

if I read your code right, then all the created <input>s have the same name. unless you use "input_name[]" (this is parsed into an array), the <input>s with the same name will overwrite each other.

PS. putting the <input> in a list is a more semantic approach.

Markus

Furthermore, you never show us how you are trying to access the data in PHP. If you are POSTing the data, it will be in the $_POST array.

Do a print_r($_POST); to see what's in that array.

Creating Dynamic User Friendly Form

re: Creating Dynamic User Friendly Form

re: Creating Dynamic User Friendly Form

Similar PHP bytes

/bytes/development

/bytes/it

/bytes/about