Dynamically created form

Page 1 of 1

2 Replies - 418 Views - Last Post: 19 August 2008 - 12:35 AM

#1 boomla  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 16-August 08

Dynamically created form

Posted 18 August 2008 - 06:07 AM

hi all,

I searched on the forum but i couldnt find i need. I want to create a whole form, not just one node. The scenario will be like this; there will be initially one form, after submitting the form there will a new form come up. 

<form> [initial form node1][initial form node2][initial form node3] [submit] </form>
<form> [new form node1 ] [new form node2] [new form node 3] [submit] </form>


by the way, i am using ajax to communicate with the server so the page wont refreshed.

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamically created form

#2 godspeedphi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 18-August 08

Re: Dynamically created form

Posted 18 August 2008 - 07:19 AM

Hmmm

You don't need to dynamically create the form. Rather, you can have them all in the code of the page, but have

style='display:none'


within any <form> that you don't want to appear.

Then, using prototype.js (available at prototypejs.org), you can use javascript to write something like

$('x').toggle();


to change a form with and ID of 'x' from/to

style='display:none'


to/from

style='display:block'



It just may be easier.

Otherwise, if you prefer to create elements on the fly, I would suggest prototype.js or a similar framework. It makes things a lot easier.
Was This Post Helpful? 0
  • +
  • -

#3 boomla  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 16-August 08

Re: Dynamically created form

Posted 19 August 2008 - 12:35 AM

I used DOM to create my form, it seems a nice way of creating forms and any other html objects. here is an example of creating a form;

<html>
<head>
<script language="javascript">

	   					
	function form_temizle(el) {
		 
					  if (el.defaultValue==el.value) el.value = "";
	}

	
	function create_form(){
	
		 var dv = document.getElementById("a");
		 var frm = document.createElement("form");
		 var name = document.createElement("input");
		 name.setAttribute("name","name");
		 name.setAttribute("value","");
		 var sirname = document.createElement("input");
		 sirname.setAttribute("name","sirname");
		 sirname.setAttribute("value","");

		 var name_label = document.createTextNode("name: ");
		 var sirname_label = document.createTextNode("   sirname: ");
		 
		 frm.appendChild(name_label);
		 frm.appendChild(name);
		 
		 frm.appendChild(sirname_label);
		 frm.appendChild(sirname);
		 
		 dv.appendChild(frm);
		 
		}
		
</script>
</head>
<body >

 <input type="button" onclick="create_form()">

 <div id="a"> </div>

</body>
</html>


thank you godspeedphi for responsing :)

This post has been edited by boomla: 19 August 2008 - 05:03 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1