Creating a dynamic form with prototype Ajax library

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.

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

XAJAX with PHP – The future of web development

XAJAX is a class library or framework written purely on PHP that allows you to easily create powerful, Web-based, Ajax applications or plugins. You can download xajax framework from http://sourceforge.net/projects/xajax/ XAJAX is easy to impement. You need to just include XAJAX library, instantiate the xajax object, and register the name of function (or an object or class method) which you want to call from XAJAX framework. xajaxResponse() is an object to return the results of our requests as XML formats. Then call that particular function you want from xajax framework through your HTML or javascript. That's it. XAJAX takes care of most everything else. You just need to write the PHP functions and returning XAJAX XML responses from them, which is made extremely easy by the xajaxResponse class. Code: <?php include './xajax/xajax_core/xajax.inc.php'; $xajax = new xajax(); $rqstAdd =& $xajax->register(XAJAX_FUNCTION, 'ad...
Lire la suite

XAJAX with PHP – The future of web development

XAJAX is a class library or framework written purely on PHP that allows you to easily create powerful, Web-based, Ajax applications or plugins. You can download xajax framework from http://sourceforge.net/projects/xajax/ XAJAX is easy to impement. You need to just include XAJAX library, instantiate the xajax object, and register the name of function (or an object or class method) which you want to call from XAJAX framework. xajaxResponse() is an object to return the results of our requests as XML formats. Then call that particular function you want from xajax framework through your HTML or javascript. That's it. XAJAX takes care of most everything else. You just need to write the PHP functions and returning XAJAX XML responses from them, which is made extremely easy by the xajaxResponse class. Code: <?php include './xajax/xajax_core/xajax.inc.php'; $xajax = new xajax(); $rqstAdd =& $xajax->register(XAJAX_FUNCTION, 'a...
Lire la suite

Database connection pooling in ADO.Net

Imagine a situation that multiple users are connecting the same database through our application. In an application establishing a database connection and logging into it is a time consuming activity. It needs several seconds for every time it establishes a connection. So opening and maintaining a database connection for each user is not an ideal solution. When the number of users increases, and if the system�s memory set is limit, probably it leads to a system crash. This problem can solve through connection pooling. A connection pool is a cache or pool of database connections maintained by the application so that the connections can be reused when the database receives future requests for data. Establishing once and reserving it for future request can essentially improve the overall performance of the application. In connection pooling, after a connection is created, the connection object is placed in the pool. When a simultaneous connection request is made later, ...
Lire la suite