Geeks on Campus

The Wizard Gets a New Trick

In an earlier post about the Bootstrap framework and responsive design I mentioned a web application that I was working on.  AWV Louver Selection Wizard

After putting that project into production, the one thing I wanted to do with it was to add AJAX to update the results table automatically.  I looked into AJAX at that time and tried to use it but wasn’t able to figure it out quickly enough.  Recently I decided to get back to figuring it out.  I found this AJAX Tutorial on W3Schools and I was able to get AJAX added to that web app.

The tutorial does a good job of introducing the concepts and giving sample code.  The one thing that I did need to figure out outside of the tutorial was how to access the values of each of the selection boxes in the form to pass to the PHP file.  It looks like there are multiple methods, but I went with code like this:

var field_value=document.forms[“form_name”][“field_name”].value;

I added onchange events to all of the select tags to call the AJAX script:

<select id=”blade_shape” name=”blade” onchange=”loadAJAX()”>

Going through the tutorial and updating the code only took one lunch hour.  It can go pretty quickly if you find the right resource.  Hopefully this post will help someone else find what they need.