|
|
| Article |
fooclass
Junior Member
Articles: 4 Comments: 1
|
|
|
| Posted: Tue Jun 17, 2008 12:22 pm |
|
|
Web is evolving rapidly these days with some powerful features. Users don’t want to wait for response from the server that will refresh the full web page they are visiting. They expect the web pages they visit behave like a desktop application.
AJAX is the buzzing word in the market delivering the content without refreshing full web page user’s visit.In this article I would like to show you how we can create a web form that generates fields dynamically.
First of all we need prototypejs library to create this dynamic web form. You can download this at: http://www.prototypejs.org/download
Now create a basic form and call the library in HTML page ( index.htm):
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>AJAX TEST</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="prototype-1.6.0.2.js"></SCRIPT>
</HEAD>
<BODY>
<fieldset id="main" style="color:#cccccc;width:800px;">
<legend>Personal Details</legend>
<span style="width:150px;">Name:</span><input type="text" name="name" size="30" />
<br />
<span style="width:150px;">DOB:</span><input type="text" name="dob" size="30" />
<br />
<br />
<div id="familyM">
Enter Family Members Details <a href="#" onClick="JavaScript:CreateMore();" title="Add More Members Details">+</a>
<hr />
<br />
<span style="width:50px;">Name</span>
<input type="text" name="FMname" size="20" />
<span style="width:50px;">Age</span>
<input type="text" name="FMage" size="10" />
<span style="width:100px;">Relationship</span>
<input type="text" name="FMrel" size="20" />
<br />
</div>
<div id="AjaxPanel">
<!-- if user adds more members details, JS will populate this section -->
</div>
</fieldset>
</BODY>
</HTML> |
Here you can see we have a user entry form with add more option where users can enter more family member’s details.
We need the row in a separate file or in a JS script block so that AJAX can generate new rows from it.
So i need following in a different file called FamilyMembers.htm
| Code: | <span style="width:50px;">Name</span>
<input type="text" name="FMname" size="20" />
<span style="width:50px;">Age</span>
<input type="text" name="FMage" size="10" />
<span style="width:100px;">Relationship</span>
<input type="text" name="FMrel" size="20" />
<br /> |
Now we need to add a JS script which will add more rows for users to fill in.
| Code: | <script>
function CreateMore(){
try{
var oAjax=new Ajax.Updater({success: 'AjaxPanel'},'FamilyMembers.htm', { insertion: Insertion.Bottom });
}catch(e){
alert('Failed to call Ajax');
}
}
</script> |
Add the JScript to Index.htm
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>AJAX TEST</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="prototype-1.6.0.2.js"></SCRIPT>
<script LANGUAGE="JavaScript">
function CreateMore(){
//try{
var oAjax=new Ajax.Updater({success: 'AjaxPanel'},'FamilyMembers.htm', { insertion: Insertion.Bottom });
// }catch(e){
// alert('Failed to call Ajax');
// }
}
</script>
</HEAD>
<BODY>
<fieldset id="main" style="color:#cccccc;width:800px;">
<legend>Personal Details</legend>
<span style="width:150px;">Name:</span><input type="text" name="name" size="30" />
<br />
<span style="width:150px;">DOB:</span><input type="text" name="dob" size="30" />
<br />
<br />
<div id="familyM">
Enter Family Members Details <a href="#" onClick="JavaScript:CreateMore();" title="Add More Members Details">+</a>
<hr />
<br />
<span style="width:50px;">Name</span>
<input type="text" name="FMname" size="20" />
<span style="width:50px;">Age</span>
<input type="text" name="FMage" size="10" />
<span style="width:100px;">Relationship</span>
<input type="text" name="FMrel" size="20" />
<br />
</div>
<div id="AjaxPanel">
<!-- if user adds more members details, JS will populate this section -->
</div>
</fieldset>
</BODY>
</HTML> |
You can see I have used Ajax.Updater here to call the FamilyMembers.htm and it will add the new rows to "AjaxPanel" division when user clicks on '+' link.
Most of these features are available in development frameworks like Microsoft .net but if you want to have a dynamic behaviour in PHP or other language you can make use of prototypejs library.
In my next article, I’ll create an example about how we can add features to remove a row from dynamic form and how these dynamically created form values are read in PHP scripts.
Hope you understand what I’m explaining in this article. Please post any comments about this article here. |
|
|
| Comments |
| No comments were made for this article |
| |
|
All times are GMT
You cannot post articles in this chapter
You cannot edit your articles in this chapter
You cannot delete your articles in this chapter
You cannot rate articles in this chapter
You cannot post comments in this chapter
You cannot edit your comments in this chapter
You cannot delete your comments in this chapter
You cannot rate comments in this chapter
|
|
