Dynamic HTML form
Moderator: General Moderators
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
Dynamic HTML form
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
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
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
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.
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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.
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.
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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.
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.
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
What I have done so far are as follows :
In javascript I have taken reference from http://javascript.internet.com/forms/dynamic-input.html
In HTML
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 :
Hoping to get a helpful suggestions soon.
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>- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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 :
2. when this link <a href="javascript:addexample('definiton1')">Add Example</a> is clicked, it should display,
and when this link
is clicked, it should display,
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.
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>Code: Select all
<textarea name="definition1_example1"></textarea>
...
...
...
<textarea name="definition1_example5"></textarea>
Code: Select all
<a href="javascript:addexample('definiton5')">Add Example</a>
Code: Select all
<textarea name="definition5_example1"></textarea>
...
...
...
<textarea name="definition5_example5"></textarea>
Any help will be much appreciated.
Thank you.