By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,934 Members | 1,692 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,934 IT Pros & Developers. It's quick & easy.

Creating Dynamic User Friendly Form

P: 1
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
  1. <HTML>
  2. <HEAD>
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  4.  
  5.  <script type="text/javascript" src="script.js">
  6.  
  7. // JavaScript Document
  8. var c=0;
  9.         function addRow(tableID) {
  10.  
  11.  
  12.             var table = document.getElementById(tableID);
  13.  
  14.             var rowCount = table.rows.length;
  15.             var row = table.insertRow(rowCount);
  16.  
  17.             var cell1 = row.insertCell(0);
  18.             var element1 = document.createElement("input");
  19.             element1.type = "checkbox";
  20.             cell1.appendChild(element1);
  21.  
  22.              var type=document.forms[0].element.value;
  23.             var value=document.forms[0].field_value.value;
  24.             var name="txt"+c;
  25.             document.forms[0].hid.value="txt"+c;
  26.             var cell2 = row.insertCell(1);
  27.             cell2.innerHTML =document.forms[0].field_name.value;
  28.  
  29.             var cell3 = row.insertCell(2);
  30.             var element2 = document.createElement("input");
  31.  
  32.             element2.setAttribute("type", type);
  33.             element2.setAttribute("value", value);
  34.             element2.setAttribute("name", name);
  35.  
  36.             if(document.forms[0].element.value =='area'){
  37.                 var element3 = document.createElement("textarea");
  38.                 cell3.appendChild(element3);
  39.                 c++;
  40.                 document.forms[0].txt.value=c;
  41.             }
  42.             else{
  43.             cell3.appendChild(element2);
  44.             c++;
  45.             document.forms[0].txt.value=c;
  46.             }
  47.  
  48.         }
  49.  
  50.         function setbg(color)
  51.             {
  52.  
  53.             document.getElementById("area").style.background=color
  54.             }
  55.  
  56.         function sz(t) {
  57.             a = t.value.split('\n');
  58.             b=1;
  59.             for (x=0;x < a.length; x++) {
  60.                  if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
  61.              }
  62.             b+= a.length;
  63.             if (b > t.rows) t.rows = b;
  64.             }
  65.  
  66.         function deleteRow(tableID) {
  67.             try {
  68.             var table = document.getElementById(tableID);
  69.             var rowCount = table.rows.length;
  70.  
  71.             for(var i=0; i<rowCount; i++) {
  72.                 var row = table.rows[i];
  73.                 var chkbox = row.cells[0].childNodes[0];
  74.                 if(null != chkbox && true == chkbox.checked) {
  75.                     table.deleteRow(i);
  76.                     rowCount--;
  77.                     i--;
  78.                     document.forms[0].txt.value=i;
  79.                 }
  80.  
  81.             }
  82.             }catch(e) {
  83.                 alert(e);
  84.             }
  85.         }
  86.  
  87. </script>
  88. </HEAD>
  89. <BODY><form style="background-color:#F6F7F2; width:100%" action="example_process.php" method="post" name="f1" >
  90. <label>Select Type</label> <SELECT name="element">
  91.  
  92.     <OPTION value="text">Textbox</OPTION>
  93.     <OPTION value="radio">Radio</OPTION>
  94.     <option value="checkbox">Check Box</option>
  95.      <OPTION value="area">Area</OPTION>
  96.  
  97. </SELECT>
  98. <label>Name</label>
  99. <input type="text" name="field_name" value="">
  100. <label>Value</label>
  101. <input type="text" name="field_value" value="">
  102.     <INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />
  103.  
  104.     <INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
  105.  
  106.     <TABLE id="dataTable" width="350px" border="0">
  107.         <TR>
  108.                <td> </td>
  109.         </TR>
  110.     </TABLE>
  111.  
  112.     <INPUT  align="right" type="submit" value="Save" />
  113.     <input type="hidden" name="txt"/>
  114.     <input type="hidden" name="hid"/>
  115. <textarea id="area" name="info" style="visibility:hidden;" onFocus="this.value=''; setbg('#e5fff3');" onBlur="setbg('white');"onkeyup="sz(this);">Enter your comment here...</textarea>
  116.  </form>
  117. </BODY>
  118. </HTML>
Oct 21 '09 #1
Share this Question
Share on Google+
2 Replies


Dormilich
Expert Mod 5K+
P: 8,639
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.
Oct 21 '09 #2

Markus
Expert 5K+
P: 6,050
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.
Oct 21 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.