473,657 Members | 2,397 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Unable to POST dynamic form elements created using javascript

1 New Member
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 2005
acoder
16,027 Recognized Expert Moderator MVP
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
1971
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 fields. I'd like to create a page in which all of this is stored as you move along as hidden variables, until the end, when the user submits. I can't figure out one thing: I have dynamic form elements (dropdowns), that I'd like to use instead of...
7
3575
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 same way like regular input fields can. strForm = "<form name=""myForm"" runat=""server"">" & vbCrLf strForm += "<asp:button name=""myName"" .... runat=""server"" />" & vbCrLf
6
2159
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 created using javascript are available at the server? if not how can i do the above thing so that there values can be accessed. I dont want to postback page everytime i need to create a new element.
3
1865
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 link titled "Hide|Show Options" that can hide/show a particular section of the HTML. I have not found a way to achieve it without using Javascript or any other scripting language.
0
907
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 I execute the execute button from within this control the text boxes and dropdown information that I expect is not being passed via request.form. Elements that are on the form but not in the webcontrol are being passed through. Do I have to...
1
1927
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 that generates them now I want to be able when I click on the checkbox, it automatically enable the select which is disabled by default. I want to use a function in javascript, that will receive the name of checkbox in parameter and changes the...
1
1358
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 append these fields to form using appendChild - they are moved from their places in page and placed diectly after <form> tag. And sure they vanish from the browser and can't be edited. How shall I append these fields to form to not to lose them and...
1
1572
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. I am looping round those, and creating an input field for each i need each input field to be submitted with the post of the main form on the page here is my function for some reason even thought the input fields are being appended to a div...
2
1810
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 $_POST in Internet Explorer. The same code works fine in Firefox and I can get the details of the checkboxes that are checked. Does anyone know of any problems with checkboxes in IE? Thanks, Sean
1
2830
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
8402
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8829
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8734
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8508
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8608
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7341
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5633
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4164
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
1962
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.