Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    Submitting a form that was created dynamically

    I am using a combination of php and Javascript to create forms that allow users to edit entries from a MySQL db. Here is the php I have...

    Code:
    <form id=\"form$id\" name=\"form$id\" method=\"POST\" action=\"viewmyfsj.php?a=edit&id=$id\">
    <tr bgcolor='$row_color'>							
    <td width=\"5%\" align=\"center\">
    <input id=\"Edit$id\" name='edit' type='button' value='Edit' onclick='change($id);'/></td>
    <td align='center' width='13%'>$dateint</td>
    <td align='center' width='21%'>
    <a href=\"restaurants.php?id=$restaurant\" title=\"View all entries from $restaurant\"><div id='restaurantNode$id'>$restaurant</div></a><span id='restauranttextbox$id'></span></td>
    <td align='center' width='22%'>
    <a href=\"similarfoods.php?searchquery=$food\" title=\"View similar food entries\"><div id='foodNode$id'>$food</div></a><span id='foodtextbox$id'></span></td>
    <td align='center' width='13%'>
    <div id='sensitiveNode$id'>$sensitive</div><span id='sensitivetextbox$id'></span></td>
    <td align='center' width='21%'><div id='notesNode$id'>$notes</div><span id='notestextbox$id'></span></td>
    <td align='center' width='5%' ><div id='xNode$id'><a href=\"viewmyfsj.php?a=deleterestentry&deleteid=$id&view=$view\" title=\"Delete this entry?\"> <deletex>x</deletex></a></div><span id='deletetextbox$id'></span></td>
    </tr>
    </form>
    [code]

    And for the Javascript...
    Code:
    <script type="text/javascript">
    
    function change(i) {
    	// create textboxes
    	var editRestaurant = document.createElement("input");
    	var editFood = document.createElement("input");
    	var editissensitive = document.createElement("input");
    	var editNotes = document.createElement("input");
    	var editSubmit = document.createElement("input");
    	
    	// disable edit button
    	document.getElementById('Edit'+i).disabled = true;
    	
    	//Assign different attributes to the element.  
        editRestaurant.setAttribute("type", "text");  
        editRestaurant.setAttribute("value", document.getElementById('restaurantNode'+i).firstChild.nodeValue);
        editRestaurant.setAttribute("name", "editrestaurant"); 
    	
    	editFood.setAttribute("type", "text");  
        editFood.setAttribute("value", document.getElementById('foodNode'+i).firstChild.nodeValue);
        editFood.setAttribute("name", "editfood"); 
    	
    	editissensitive.setAttribute("type", "text");  
        editissensitive.setAttribute("value", document.getElementById('sensitiveNode'+i).firstChild.nodeValue);
        editissensitive.setAttribute("name", "editissensitive"); 
    
        editNotes.setAttribute("type", "text");
    	// check to see if notes is empty
    	if (document.getElementById("notesNode"+i).firstChild == null) 
    		editNotes.setAttribute("value", "");
    	else
        	editNotes.setAttribute("value", document.getElementById('notesNode'+i).firstChild.nodeValue);
        editNotes.setAttribute("name", "editnotes"); 
    	
        editSubmit.setAttribute("type", "button");  
        editSubmit.setAttribute("value", "Save");
        editSubmit.setAttribute("name", "editSubmit");
    	editSubmit.setAttribute("onclick", "submitform("+i+")");
    	
    	// make text disappear
    	document.getElementById('restaurantNode'+i).style.display = 'none';
    	document.getElementById('foodNode'+i).style.display = 'none';
    	document.getElementById('sensitiveNode'+i).style.display = 'none';
    	document.getElementById('notesNode'+i).style.display = 'none';
    	document.getElementById('xNode'+i).style.display = 'none';
    	
    	document.getElementById('restauranttextbox'+i).appendChild(editRestaurant);
    	document.getElementById('foodtextbox'+i).appendChild(editFood);
    	document.getElementById('sensitivetextbox'+i).appendChild(editissensitive);
    	document.getElementById('notestextbox'+i).appendChild(editNotes);
    	document.getElementById('deletetextbox'+i).appendChild(editSubmit);
    }
    
    function submitform(i)
    {
    	var myform = "form"+i;
    	document.myform.submit();
    }
    </script>
    The problem is that the form is not submitting. I think it has to do with the fact that the input fields are created dynamically. Do you know of a way around this?

    Thanks!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I suspect your problem occurs in IE. Well, IE browsers have a DOM bug, they do not handle quite well the name attribute. See :
    http://www.codingforums.com/showthread.php?t=142873#4
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •