DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 4 of 4

Thread: Dynamically adding elements to a form using AJAX

  1. #1
    Join Date
    Nov 2007
    Posts
    2

    Dynamically adding elements to a form using AJAX

    I am writing a web application using AJAX and Perl/CGI. One of the pages contains a form that has only 2 elements initially, a text field and a combo box (drop-down list). When the user makes a selection in the combo box, I use an AJAX call to create more form elements (radio controls) within the same form. But, when I submit the form, I'm finding that the newly created form elements do not get reflected in the script that is triggered by the form submission. For the form submission, I am once again using AJAX. I would appreciate any help/tips/pointers in this regard.

    Thanks in advance,
    Swaroop

  2. #2
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    Swaroop,

    You haven't given any fragment of code. Please give the code fragment that adds the new elements into the form. Maybe the new elements are not being added in the form, or they may not be having a name attribute.

  3. #3
    Join Date
    Nov 2007
    Posts
    2
    I have included the relevant bits of code below. The first chunk is an HTML file that renders the page. When it loads the first time, it shows a form with only a text field and a combo box. There is also a DIV section that is empty. Just below the DIV section, there are submit and reset buttons. When the user types in a name and selects a value from the combo box, I send an AJAX request (in ajaxFunction()) to a Perl CGI script on the server (which is the second chunk of code below). This Perl CGI script creates the rest of the form, which is basically a bunch of radio controls, and returns the resulting HTML code. When the AJAX code in the main HTML receives the response (getAuditTemplate()), it puts the HTML code in the DIV tag. Recall that the DIV tag is placed between the FORM start and end tags. So, I would assume that, now, the form contains a text field (created earlier), a combo box (created earlier) and the radio controls (created via the AJAX/CGI scripts). Now, I can make my selections among the radio controls and press the Submit button. I expect the values from all the fields, viz. text field, combo box & all the radio controls to be submitted to the server. However, on the server side, the CGI script (the third chunk shown below) is receiving only the first two form values, not the newly created ones. Hope this gives you enough information to work with.

    Thanks,
    Swaroop

    ***************************************
    <html>
    <head>
    <title>IS AUDIT APPLICATION - NEW ENTRY</title>
    </head>
    <body>
    <script type="text/javascript">
    var xmlHttp;

    function initAjax()
    {
    try {
    //Firefox, Opera, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
    //Internet Explorer
    //alert("First exception");
    try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    //alert("Second exception");
    try {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {
    //alert("Your browser does not support AJAX!");
    return false;
    }
    }
    }

    return xmlHttp;
    }
    function getAuditTemplate()
    {
    //alert("getAuditTemplate: " + xmlHttp.readyState);
    //alert(xmlHttp.readyState);
    if(xmlHttp.readyState==4) {
    //document.myForm.time.value=xmlHttp.responseText;
    document.getElementById("auditdetails").innerHTML=xmlHttp.responseText;
    //for (i=0; i<xmlHttp.responseText.length; i++) {
    // var ch = xmlHttp.responseText.charAt(i);
    //if (ch == '0') {
    // }
    //else if (ch == '1') {
    // }
    //}
    }
    }
    function ajaxFunction()
    {
    //alert("keyup() function");
    xmlHttp = initAjax();
    xmlHttp.onreadystatechange=getAuditTemplate;

    afForm=document.getElementById("AF001");
    elemList=afForm.elements;
    selOpt=elemList["isauditapp_designation"].value;
    urlStr="http://10.11.22.21/cgi-bin/audit_gettemplate.cgi?designation=" + selOpt;
    //alert(urlStr);
    xmlHttp.open("GET", urlStr, true);
    xmlHttp.send(null);
    }
    function resetValues() {
    }
    </script>

    <!-- form name="audit_newentry" method="POST" action="http://10.11.22.21/cgi-bin/audit_newentry.cgi" id="AF001" -->
    <form name="audit_newentry" method="POST" id="AF001">
    Name: <input type="text" size="30" maxlength="100" name="isauditapp_name">
    Designation: <select name="isauditapp_designation" size="1" onChange="ajaxFunction();">
    <option value="0">Select a designation</option>
    <option value="3">SDC/PDC/LC</option>
    <option value="2">ProjMgr/PgmMgr</option>
    <option value="5">Architect</option>
    <option value="4">AC/SC/DC</option>
    <option value="1">SvcPtnr</option>
    </select>
    <hr>
    <div id="auditdetails">
    </div>
    <hr>
    <input type="button" name="Add" value="Add" onClick="submitForm();">&nbsp;&nbsp;<input type="button" name="Reset" value="Reset" onClick="resetValues();">
    </form>
    </body>
    </html>
    ***************************************
    #!/usr/bin/perl -w

    $|=1;
    use CGI;
    use DBI;

    my $query = new CGI;
    print $query->header;
    my $designation = $query->param("designation");

    print "<table width=\"100%\" border=\"0\">\n";
    if ($designation == 0) {
    print "</table>\n";
    exit 0;
    }

    my $db="xxxxxxx";
    my $host="localhost";
    my $userid="xxxxxxx";
    my $password="xxxxxxxx";
    my $connstr="dbi:mysql:$db;$host";

    my $dbh = DBI->connect($connstr, $userid, $password);

    my $sql = "SELECT * FROM audittemplates WHERE designation_id = ?";
    my $sth = $dbh->prepare($sql);
    $sth->execute($designation);

    $sth->bind_columns(\$id, \$designation_id, \$editplus, \$toad, \$msvisio, \$msproject, \$winzip, \$vviewer, \$list_bps, \$list_bgps, \$list_bmgrs, \$list_ipms, \$list_sps, \$perms_blrcons, \$perms_psmgmt);

    $sth->fetch();
    if ($editplus == 1) {
    print "<tr><td>EditPlus</td><td><input type=\"radio\" name=\"epp\" value=\"on\" checked></td><td><input type=\"radio\" name=\"epp\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>EditPlus</td><td><input type=\"radio\" name=\"epp\" value=\"on\"></td><td><input type=\"radio\" name=\"epp\" value=\"off\" checked></td></tr>\n";
    }
    if ($toad == 1) {
    print "<tr><td>TOAD</td><td><input type=\"radio\" name=\"toad\" value=\"on\" checked></td><td><input type=\"radio\" name=\"toad\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>TOAD</td><td><input type=\"radio\" name=\"toad\" value=\"on\"></td><td><input type=\"radio\" name=\"toad\" value=\"off\" checked></td></tr>\n";
    }
    if ($msvisio == 1) {
    print "<tr><td>MS-Visio</td><td><input type=\"radio\" name=\"visio\" value=\"on\" checked></td><td><input type=\"radio\" name=\"visio\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>MS-Visio</td><td><input type=\"radio\" name=\"visio\" value=\"on\"></td><td><input type=\"radio\" name=\"visio\" value=\"off\" checked></td></tr>\n";
    }
    if ($msproject == 1) {
    print "<tr><td>MS-Project</td><td><input type=\"radio\" name=\"mpp\" value=\"on\" checked></td><td><input type=\"radio\" name=\"mpp\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>MS-Project</td><td><input type=\"radio\" name=\"mpp\" value=\"on\"></td><td><input type=\"radio\" name=\"mpp\" value=\"off\" checked></td></tr>\n";
    }
    if ($winzip == 1) {
    print "<tr><td>WinZip</td><td><input type=\"radio\" name=\"wz\" value=\"on\" checked></td><td><input type=\"radio\" name=\"wz\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>WinZip</td><td><input type=\"radio\" name=\"wz\" value=\"on\"></td><td><input type=\"radio\" name=\"wz\" value=\"off\" checked></td></tr>\n";
    }
    if ($vviewer == 1) {
    print "<tr><td>Visio Viewer</td><td><input type=\"radio\" name=\"vviewer\" value=\"on\" checked></td><td><input type=\"radio\" name=\"vviewer\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>Visio Viewer</td><td><input type=\"radio\" name=\"vviewer\" value=\"on\"></td><td><input type=\"radio\" name=\"vviewer\" value=\"off\" checked></td></tr>\n";
    }
    if ($list_bps == 1) {
    print "<tr><td>DL-BLR PROF SVCS</td><td><input type=\"radio\" name=\"blrps\" value=\"on\" checked></td><td><input type=\"radio\" name=\"blrps\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>DL-BLR PROF SVCS</td><td><input type=\"radio\" name=\"blrps\" value=\"on\"></td><td><input type=\"radio\" name=\"blrps\" value=\"off\" checked></td></tr>\n";
    }
    if ($list_bgps == 1) {
    print "<tr><td>DL-BLR GDC PS</td><td><input type=\"radio\" name=\"blrgdcps\" value=\"on\" checked></td><td><input type=\"radio\" name=\"blrgdcps\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>DL-BLR GDC PS</td><td><input type=\"radio\" name=\"blrgdcps\" value=\"on\"></td><td><input type=\"radio\" name=\"blrgdcps\" value=\"off\" checked></td></tr>\n";
    }
    if ($list_bmgrs == 1) {
    print "<tr><td>DL-BLR MGRS</td><td><input type=\"radio\" name=\"blrmgrs\" value=\"on\" checked></td><td><input type=\"radio\" name=\"blrmgrs\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>DL-BLR MGRS</td><td><input type=\"radio\" name=\"blrmgrs\" value=\"on\"></td><td><input type=\"radio\" name=\"blrmgrs\" value=\"off\" checked></td></tr>\n";
    }
    if ($list_ipms == 1) {
    print "<tr><td>DL-IPSPMS</td><td><input type=\"radio\" name=\"ipspms\" value=\"on\" checked></td><td><input type=\"radio\" name=\"ipspms\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>DL-IPSPMS</td><td><input type=\"radio\" name=\"ipspms\" value=\"on\"></td><td><input type=\"radio\" name=\"ipspms\" value=\"off\" checked></td></tr>\n";
    }
    if ($list_sps == 1) {
    print "<tr><td>DL-BLR GDC SPs</td><td><input type=\"radio\" name=\"gdcsps\" value=\"on\" checked></td><td><input type=\"radio\" name=\"gdcsps\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>DL-BLR GDC SPs</td><td><input type=\"radio\" name=\"gdcsps\" value=\"on\"></td><td><input type=\"radio\" name=\"gdcsps\" value=\"off\" checked></td></tr>\n";
    }
    if ($perms_blrcons == 1) {
    print "<tr><td>Ntwk Perms - BLR Cnsltg</td><td><input type=\"radio\" name=\"blrcnsltg\" value=\"on\" checked></td><td><input type=\"radio\" name=\"blrcnsltg\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>Ntwk Perms - BLR Cnsltg</td><td><input type=\"radio\" name=\"blrcnsltg\" value=\"on\"></td><td><input type=\"radio\" name=\"blrcnsltg\" value=\"off\" checked></td></tr>\n";
    }
    if ($perms_psmgmt == 1) {
    print "<tr><td>Ntwk Perms - PS Mgmt</td><td><input type=\"radio\" name=\"psmgmt\" value=\"on\" checked></td><td><input type=\"radio\" name=\"psmgmt\" value=\"off\"></td></tr>\n";
    }
    else {
    print "<tr><td>Ntwk Perms - PS Mgmt</td><td><input type=\"radio\" name=\"psmgmt\" value=\"on\"></td><td><input type=\"radio\" name=\"psmgmt\" value=\"off\" checked></td></tr>\n";
    }

    print "</table>\n";

    $sth->finish();
    $dbh->disconnect;
    ***************************************

  4. #4
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    You do not have code to handle the response from the thing you have sent. You are printing HTML, but that won't be received. You have to send data via XML, which should be parsed by your JavaScript code and the JavaScript code should dynamically add the checkboxes. You can refer the course in w3schools to understand how you can get the response from the server.

Similar Threads

  1. adding elements to a JList
    By anubis in forum Java
    Replies: 3
    Last Post: 02-02-2006, 05:50 PM
  2. Re: Locking form elements?
    By Scott in forum Web
    Replies: 2
    Last Post: 11-02-2001, 12:13 AM
  3. formating form elements with XSL
    By Fred in forum XML
    Replies: 1
    Last Post: 08-15-2001, 01:18 PM
  4. Parsing Form Elements in a Loop
    By Brian in forum authorevents.mitchell
    Replies: 1
    Last Post: 10-16-2000, 09:24 PM
  5. Dynamically Adding Menu
    By Sanjay in forum Java
    Replies: 0
    Last Post: 09-13-2000, 07:54 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center