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
- <html>
- <head>
- <script type="text/javascript">
- function add() {
- //Create an input type dynamically.
- var element1 = document.createElement("input");
- var element2 = document.createElement("input");
- var newdiv = document.createElement("button");
- var space = document.createElement("div");
- //Assign different attributes to the element.
- element1.setAttribute("type", "text");
- element2.setAttribute("type", "text");
- //newdiv.setAttribute("type", "button");
- //element.setAttribute("value", type);
- //element.setAttribute("name", type);
- var numi = document.getElementById('theValue');
- var num = (document.getElementById('theValue').value -1)+ 2;
- numi.value = num;
- var area = document.getElementById('area');
- var divIdName1 = 'name'+num;
- var divIdName2 = 'amount'+num;
- var divIdName3 = 'button'+num;
- element1.setAttribute('id',divIdName1);
- element2.setAttribute('id',divIdName2);
- newdiv.setAttribute('id',divIdName3);
- element1.setAttribute('value',divIdName1);
- element2.setAttribute('value',divIdName2);
- newdiv.setAttribute('value','harsh');
- // element2.setAttribute('id', );
- //Append the element in page (in span).
- space.innerHTML='<br />';
- newdiv.onclick = function() {
- //document.write(divIdName1);
- var olddiv = document.getElementById(divIdName1);
- area.removeChild(olddiv);
- olddiv = document.getElementById(divIdName2);
- area.removeChild(olddiv);
- olddiv = document.getElementById(divIdName3);
- area.removeChild(olddiv);
- area.removeChild(space);
- }
- area.appendChild(element1);
- area.appendChild(element2);
- area.appendChild(newdiv);
- area.appendChild(space);
- }
- </script>
- </head>
- <body>
- <form id="frmMain" name="frmMain" method=get action=test.php>
- <input type="hidden" value="0" id="theValue" />
- <div id="area">
- <input type="button" value="+" onclick="add()"/>
- <br />
- <br />
- </div>
- <input type=submit value=submit>
- </form>
- </body>
- </html>
PHP code : test.php
Expand|Select|Wrap|Line Numbers
- <?
- echo "<h1>Form posted with Ajax</h1>";
- echo "<h4>POST variables</h4>";
- print_r($_POST);
- foreach($_POST as $key=>$value){
- echo "yes";
- if(is_array($value)){
- for($no=0;$no<count($value);$no++){
- echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";
- }
- }else{
- echo "<b>".$key."</b>: ".$value."<br>";
- }
- }
- echo "<h4>GET variables:</h4>";
- foreach($_GET as $key=>$value){
- if(is_array($value)){
- for($no=0;$no<count($value);$no++){
- echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";
- }
- }else{
- echo "<b>".$key."</b>: ".$value."<br>";
- }
- }
- ?>