473,387 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Unable to POST dynamic form elements created using javascript

I am trying to POST dynamic form elements added using javascript but unable to do so. The elements are being shown when I add them but don't see anything on the test.php page.

I have been trying to figure out the issue but in vain. I also used Firebug to inspect the DOM elements but it looked fine. Please help

Here is my code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. function add() {
  6.  
  7. //Create an input type dynamically.
  8. var element1 = document.createElement("input");
  9. var element2 = document.createElement("input");
  10. var newdiv = document.createElement("button");
  11. var space = document.createElement("div");
  12. //Assign different attributes to the element.
  13.  
  14. element1.setAttribute("type", "text");
  15. element2.setAttribute("type", "text");
  16. //newdiv.setAttribute("type", "button");
  17. //element.setAttribute("value", type);
  18. //element.setAttribute("name", type);
  19. var numi = document.getElementById('theValue');
  20. var num = (document.getElementById('theValue').value -1)+ 2;
  21. numi.value = num;
  22.  
  23. var area = document.getElementById('area');
  24.  
  25. var divIdName1 = 'name'+num;
  26. var divIdName2 = 'amount'+num;
  27. var divIdName3 = 'button'+num;
  28.  
  29. element1.setAttribute('id',divIdName1);
  30. element2.setAttribute('id',divIdName2);
  31. newdiv.setAttribute('id',divIdName3);
  32.  
  33. element1.setAttribute('value',divIdName1);
  34. element2.setAttribute('value',divIdName2);
  35. newdiv.setAttribute('value','harsh');
  36.  
  37. //  element2.setAttribute('id', );
  38.  
  39. //Append the element in page (in span).
  40. space.innerHTML='<br />';
  41. newdiv.onclick =  function() {
  42. //document.write(divIdName1);
  43. var olddiv = document.getElementById(divIdName1);
  44. area.removeChild(olddiv);
  45. olddiv = document.getElementById(divIdName2);
  46. area.removeChild(olddiv);
  47. olddiv = document.getElementById(divIdName3);
  48. area.removeChild(olddiv);
  49. area.removeChild(space);
  50. }
  51.  
  52.  
  53.  
  54. area.appendChild(element1);
  55. area.appendChild(element2);
  56. area.appendChild(newdiv);
  57. area.appendChild(space);
  58. }
  59. </script>
  60. </head>
  61. <body>
  62. <form id="frmMain" name="frmMain" method=get action=test.php>
  63.  
  64.     <input type="hidden" value="0" id="theValue" />
  65.         <div id="area">
  66.             <input type="button" value="+" onclick="add()"/>
  67.             <br />
  68.             <br />
  69.        </div> 
  70.        <input type=submit value=submit>
  71. </form>
  72. </body>
  73. </html>

PHP code : test.php

Expand|Select|Wrap|Line Numbers
  1. <?
  2. echo "<h1>Form posted with Ajax</h1>";
  3. echo "<h4>POST variables</h4>";
  4. print_r($_POST);
  5. foreach($_POST as $key=>$value){
  6. echo "yes";
  7. if(is_array($value)){       
  8.     for($no=0;$no<count($value);$no++){
  9.         echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";   
  10.     }
  11. }else{
  12.     echo "<b>".$key."</b>: ".$value."<br>";
  13. }
  14.  
  15.  
  16. }
  17.  
  18. echo "<h4>GET variables:</h4>";
  19. foreach($_GET as $key=>$value){
  20. if(is_array($value)){       
  21.     for($no=0;$no<count($value);$no++){
  22.         echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";   
  23.     }
  24. }else{
  25.     echo "<b>".$key."</b>: ".$value."<br>";
  26. }
  27.  
  28. }
  29.  
  30. ?>
Nov 13 '11 #1
1 2000
acoder
16,027 Expert Mod 8TB
Elements will need a "name" attribute to be available in your server-side script.
Nov 17 '11 #2

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

Similar topics

0
by: Pat Patterson | last post by:
I'm having serious issues with a page I'm developing. I just need some simple help, and was hoping someone might be able to help me out in here. I have a form, that consists of 3 pages of...
7
by: Venus | last post by:
Hello, I am trying to generate a dynamic form at runtime and would like to do it using "<asp: ..." form elements as follows Build up the string that is placed somewhere in the HTML code the...
6
by: Vikram | last post by:
I have added some input elements on a page using javascript at client side. when i submit the page, i am unable to access the values of input elements created using request.form. Are elements...
3
by: hagarwal | last post by:
People, Here's my situation: 1. I have a web browser component that does not support Javascript (well it does, but we've disabled it) 2. I have to display some HTML in it, where the user has a...
0
by: sres.wwii | last post by:
Hi, I've written a Webcontrol in c# and I've added it into my aspx file and it renders properly. I can see the HTML tags that it produces and they are all between the FORM object, however when...
1
by: prisk | last post by:
Hi, I have a form that has checkboxes and lists generated in php with the names like this <input name=chk<?$i$j?onClick="EnableLst(name of checkbox)"> <select name =lst<?$i$j?disabled> in a loop...
1
by: udivitelno | last post by:
Here is the problem: part of the form elements is replaced using Ajax. After this new input elements getting lost from the form so nothing can be POSTed through these input fields. But if I try to...
1
by: raldred | last post by:
hey. Im creating a basic function to submit product skus and quantities to another page i am created the form elements for the quantities in a popup div based on items selected on the current page....
2
by: Sebarry | last post by:
Hi, I have a Javascript function that creates a number of checkboxes dynamically using document.createElement. The checkboxes are created fine but even when they are checked they don't appear in...
1
by: irfanshariffa | last post by:
<html> <head> <script type="text/javascript" language="javascript"> function validate() { if (document.form.fname.value=="") { alert("Enter your Name"); document.form.fname.focus();
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.