Dynamic HTML form

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Dynamic HTML form

Post 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
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
aaronhall
DevNet Resident
Posts: 1040
Joined: Tue Aug 13, 2002 5:10 pm
Location: Back in Phoenix, missing the microbrews
Contact:

Post 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
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
Post Reply