Page 1 of 1

Dynamic HTML form

Posted: Thu Dec 07, 2006 6:05 am
by dibyendrah
Dear all,
I'm currently developing an interface for lexicographers. I want to add facilities on that interface like creating as much definitions as they want. For each definition, there should be facility to add as much examples they want. So, what I need is to create dynamic html forms without reloading page.

Has anybody implemented a dynamic form control ? Please share the code snippets if anyone of you have already done that.

With Best Regards,
Dibyendra

Posted: Thu Dec 07, 2006 7:25 am
by CoderGoblin
You did not provide that much in the way of detail so this is not specific.. To go an Ajax or Javascript route, the first thing I would do is break down the page and figure out what needs to be changed for each definition/example. Then calculate what you need to do "javascript" wise to add each definition/example keeping in mind the overall form variables etc (if the whole thing is a form). Adding/Removing things should be fairly straightforward using the javascript DOM . If you don't need to do anything PHP/Server side wise I would keep it all in Javascript. JavaScript tutorial - DOM nodes and tree should give you some help (found with a quick google). If new definitions need to be processed, via php, you could look at the Coding Critique topic Dynamic/Chained Selects using Ajax with Prototype which would require modifcation but shows a simple AJAX process working and replacing content on the fly without reloading a the page.

Posted: Thu Dec 07, 2006 11:14 am
by dibyendrah
Thank you CoderGoblin for your response.

Currently, I just wanted is to put the button which when clicked will add the html textarea on the page allowing lexicographer to add as many definitions as they want. But the problem is that each desinition will also have many examples which I'm still confused about implementing that.

Any idea about this kind of issues ?

Hoping to get response from you all soon.

Posted: Fri Dec 08, 2006 5:37 am
by dibyendrah
I was taking a reference from
http://javascript.internet.com/forms/dynamic-input.html

But it only supports IE which is quite annoying.

I wish to get reponse soon.

Thank you.

Posted: Sun Dec 10, 2006 4:19 am
by dibyendrah
What I have done so far are as follows :

In javascript I have taken reference from http://javascript.internet.com/forms/dynamic-input.html

Code: Select all

var arrInput = new Array(0);
var arrInputValue = new Array(0);

function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
   return "<tr><td width=100>Example "+(id+1)+".</td><td><textarea name=\"txtaExample[]\" rows=5 cols=46 id='ex"+ id +"' onChange='javascript:saveValue("+ id +",this.value)'>"+value +"</textarea><td></tr><BR>";
}

function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}

In HTML

Code: Select all

<p id="parah">Add Examples</p>
	<table border="1">
		<a href="javascript:addInput()">Add Example(s)</a><br>
		<a href="javascript:deleteInput()">Remove Example(s)</a></td>
	</table>

The output from this javascript is that we can add as many examples as we want for any definitions. What I'm trying to do is to give lexicographers the same facility for definitons as well which they are getting for examples.

If lexicographer add 2 definitons and 2 examples for each definitions, the form should be constructed like below :

Code: Select all

<input type="text" name="x_hw_pos_gw_defn_no" id="x_hw_pos_gw_defn_no1"  value="">
<textarea id="x_hw_pos_gw_defn" name="x_hw_pos_gw_defn1"></textarea>
<textarea name=\"txtaDefn1Example[]\"></textarea>
<textarea name=\"txtaDefn1Example[]\"></textarea>

<input type="text" name="x_hw_pos_gw_defn_no" id="x_hw_pos_gw_defn_no2"  value="">
<textarea id="x_hw_pos_gw_defn" name="x_hw_pos_gw_defn2"></textarea>
<textarea name=\"txtaDefn2Example[]\"></textarea>
<textarea name=\"txtaDefn2Example[]\"></textarea>
Hoping to get a helpful suggestions soon.

Posted: Sun Dec 10, 2006 11:16 am
by aaronhall
Your job would be much easier if you were making use of javascript's DOM manipulation functions -- CoderGoblin already posted this which covers them thoroughly

Posted: Mon Dec 11, 2006 12:52 am
by dibyendrah
Thank you aaronhall for the link.

As time is very limited for making this kind of interface, it will be very helpful if you can make a simple script which will do following :

1. When add defnition is clicked, there should be form displayed with following elements :

Code: Select all

<textarea name="definition1"></textarea>
<a href="javascript:addexample('definition1')">Add Example</a>
....
....
....
<textarea name="definition5"></textarea>
<a href="javascript:addexample('definition5')">Add Example</a>
2. when this link <a href="javascript:addexample('definiton1')">Add Example</a> is clicked, it should display,

Code: Select all

<textarea name="definition1_example1"></textarea>
...
...
...
<textarea name="definition1_example5"></textarea>
and when this link

Code: Select all

<a href="javascript:addexample('definiton5')">Add Example</a>
is clicked, it should display,

Code: Select all

<textarea name="definition5_example1"></textarea>
...
...
...
<textarea name="definition5_example5"></textarea>
This is just an idea and if you can craft the javascript for this, it will be really helpful for me.
Any help will be much appreciated.

Thank you.