How to make context-sensitive forms with Ajax and Prototype (page 4 of 4)

Search

Topics

Home

How To

About

Subscribe in a reader

Other IzziDs

Site Map -- Disclaimer

How to make context-sensitive forms with Ajax and Prototype

(page 4 of 4)

Sending the form values to the car display page

For my microarray dynamic form challenge, I wrote up the code to get this far in about an hour or so. And I was quite pleased at how smoothly things went (particularly I was happy to have found the Ajax.Updater() function, which makes the trickiest part trivial). However, when I typed in some test example values into the forms and hit the submit button the unpleasant thing I'd been hoping wouldn't happen occurred. None of the values from the asynchronously updated form elements were passed on to the script called by the form.

I spent the rest of the day trying to figure out a solution. I'm still not completely happy with the solution I came up with. It works and requires little code, but it's certainly not very elegant (if you can think of something better, send me an email and tell me - preferably with some sample code: bfjf@yahoo.com).

After messing around for a good while, I figured out that the asynchronously generated form information was available to javascript, it just wasn't being passed by the browser to the destination script. So I decided to run a javascript function check_form() on_submit. The check_form function generates a GET query and uses a redirect to send the GET query to the destination script.

/* this function is because the ajax form elements seem to only 
   be visible to javascript and not the browser. the browser 
   won't pass on my stinkin parameters, so I'm passing them through
   a javascript redirect.  if anyone knows a better way, I'd be 
   happy to hear it!!
*/
function check_form() {
   // grab all of the input elements
   var x = document.getElementsByTagName('input');
   var GET_info = "";

   for (var i=0;i<x.length;i++) {
      // skip unchecked checkboxes
      if ((x[i].type == 'checkbox' || x[i].type == 'radio') && !x[i].checked) {
         continue;
      }

      if (i == 0) { GET_info = x[i].name + '=' + x[i].value; }
      else { GET_info +=  "&" + x[i].name + "=" + x[i].value; }
   }
   this.document.location.href='final_script.php?' + GET_info;

   return false;  // is there no better way????????
}

For completeness, we need one final script. In a real world scenario, this final script would take the parameters passed from our form and present the appropriate list of cars. Here our script is just going to display all the variables passed by the GET url.

<?php
   echo "Variables passed to this form:<BR>";
   foreach ($_GET as $key => $value) {
      echo "$key => $value<br>\n";
   }
?>

Here is the working dynamic forms example and the final dynamic forms javascript code.

Previous Page

Skip to page: 1 | 2 | 3 | 4