We help IT Professionals succeed at work.

Using JavaScript to update an form based on ASP...

Medium Priority
251 Views
Last Modified: 2010-04-06
Hi there, I have a problem I hope you can help me with.

I have a ASP page with a form on that gets data from a Access DB.  To explain this I will use a car scenario.  I have 1 drop down box listing makes of cars (taken from the database) and a drop down box listing models of cars (taken from the database).  I would like it so when you select a make of car that the models you can choose in the next box are only from the correct make.  For example, when you select Ford from the make box, you can only see Ford cars in the model drop down box, not cars from all makes.  Make sense?

First off, what would doing such a thing be called as I have been looking for help but cannot find a thing? Would it be refreshing a form? Anyway, does anyone know a simple way using JavaScript to do this and could you give me some code and advice on inserting it into my page?

Thanks a lot for this.

WestWoodster
Comment
Watch Question

plq

Commented:
If your clients are IE6 use httpget to retrieve a query without refreshing the page.

You'll need an ASP page which returns the innerHTML for the <option> tags of the select element

And call it from script like this...

function httpget(sasp)
{       
      var sstatus = window.status;
      window.status = "Working...";
      var httpobject = new ActiveXObject("Microsoft.XMLHTTP");
      httpobject.Open("GET", sasp, false);
      httpobject.setRequestHeader("content-type", "text/plain");            // makes no difference to the try catch below
      httpobject.send();
      try
      {
            result = httpobject.responseText;
      }
      catch (exception)
      {
            try
            {
                  result = httpobject.responseBody;
            }
            catch (exception)
            {
                  alertuser("Unexpected response type returned to httpget function from Middle tier\n\nThe system may still work normally but you should notify the software vendor");
                  result = httpobject.responseXML;
            }
      }
      window.status = sstatus;
      return result;
}


To access the select element

<select id="sel1"></select>

sel1.innerHTML = httpget("myasp.asp?manufacturer=" + cbomanu.value);

There are alternatives for mozilla,

Another alternative is to pull back all the models when the page loads but only show the relevant ones. Let me know if you prefer this option, the decision should depend on the volume of data being sent up at load time.

Author

Commented:
Thank you for you prompt reply.  I would prefer to use an option that worked with older versions of IE.  Not bothered about browsers that are not IE, but older IE ones must work with what I am doing (not 'really' old ones but say at the least version 5).  Does the second alternative support older versions of IE? I read somewhere that you can do it by having 2 forms and one is hidden but holds variables while you refresh? Or did I read that wrong.  I have never used JavaScript really! This is my ASP page at the moment with all the fancy bits and HTML shown.

            <%             
            Set oConn = Server.CreateObject("ADODB.Connection")
            cst = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _
            Server.MapPath("wooda.mdb")
            oConn.Open cst
            %>

            <%
            getSQL = "Select distinct make From cars"
            getSQL2 = "Select distinct model From cars"
            getSQL3 = "Select distinct colour From cars"
            set oRs = oConn.Execute(getSQL)
            set oRs2 = oConn.Execute(getSQL2)
            set oRs3 = oConn.Execute(getSQL3)
                      %>

                         <form name="form_one" action="response_page.asp" method="get">

            <select name="form_make" size="1">
            <% oRs.MoveFirst%>
            <% Do While Not oRs.EOF%>
            <option><% =oRs("make")%><br>
                          <% oRs.MoveNext
            Loop%>
            </select><br><br>

            <select name="form_model" size="1">
            <% oRs2.MoveFirst%>
            <% Do While Not oRs2.EOF%>
            <option><% =oRs2("model")%><br>
                          <% oRs2.MoveNext
            Loop%>
            </select><br><br>

            <select name="form_colour" size="1">
            <% oRs2.MoveFirst%>
            <% Do While Not oRs3.EOF%>
            <option><% =oRs3("colour")%><br>
                         <% oRs3.MoveNext
            Loop%>
                      </select>

            <p><input type="submit" value="Search">
            <input type="reset" value="Reset"></p>

                      </form>

                      <%
                      oRs.close
                      oConn.close
                      %>

Again thanks for your help. Any further input appreciated.

WestWoodster
plq

Commented:
I'm sure that xmlhttp works OK on version 5, so my code above should be OK.

Another tip. On your asp page you don't need to use <% on every line. You can do

<%
code line 1
code line 2
%>

To do it all client side, have a second select with

<select id="bigselect" style="display:none">
<option value="manuid_modelid">Model Name</option>
... all models ...
</select>

put an onchange event on the manufacturer

Have a models select which is empty

<select id="models">
</select>

Then in javascript

function dochange()
{
models.options.length = 0;
var manuid = manu.value;
for (var i = 0; i < manu.options.length; i++)
{
  var opt = manu.options[i];
  var id = opt.id;
  var manuid1 = id.split("_")[0];
  if (manuid1 == manuid)
  {
  var opt1 = new Option();
  opt1.value = opt.value;
  opt1.text = opt.text;
  models.options[modes.options.length] = opt
  }

}
}

All out of my head and untested.. hope its OK

thanks

Author

Commented:
Thats great.  Looks just what I am after, but I have tried it and I get a JavaScript error at the moment (I am guessing I have done something wrong!)  It says that 'models' is undefined on the first line. Sorry to be a real pain but to make you work hard for your points :) could you just add a few comments as to what the script is doing, I would like to understand and hopefully learn something along the way. Thanks a lot for your help again.  Much appreciated...

WestWoodster

P.S. If I have the new empty 'model select', do I still need the old one or is this replacing it? Sorry for being a bit of a "n00b" :)
plq

Commented:
models is the id of the <select> which starts off empty
manu is the id of the <select> containing manufacturers
modes is wrong, other things were wrong. so not surprised it won't work. I need a holiday

<select id=cbomanu >
-- all manufacturers
<select id=cbobig style="display:none">
-- put all models in here, with the option value set to manuid_modelid
<select id=cbomodel>
-- leave empty


function dochange()
{
cbomodel.options.length = 0;  // empties the visible dropdown
var manuid = manu.value;
alert(manuid); // check that this is the right manufacturer id

for (var i = 0; i < cbobig.options.length; i++)         // each option in the big list of models
{
  var opt = cbobig.options[i];
  var id = opt.id;
  var manuid1 = id.split("_")[0];              // get the manuid out of manuid_modelid
  if (manuid1 == manuid)                      // is it a matching manu ?
  {
  var opt1 = new Option();                   // create an option and append it to the visible list
  opt1.value = opt.value;                      // copying values out of the invisible list
  opt1.text = opt.text;
  cbomodel.options[cbomodel.options.length] = opt1;
  }

}
}

thats got more chance of working, and hopefully the comments will help

Author

Commented:
Thats great, thanks.  It does make sense now but....(here it comes lol) I get an error here...

cbomodel.options.length = 0;

It says 'cbomodel' is undefined. If I set it to a variable and to 0 (just testing) it does not have this error but then still gets and error on the next word ('options') and says its null or not an object.  Any ideas? Thanks again! Hopefully I won't waste anymore of time after this! I could use a holiday after this to...

Using your script as you made it...this is what I have....sorry if its just me being silly...

<%             
Set oConn = Server.CreateObject("ADODB.Connection")
cst = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _
Server.MapPath("wooda.mdb")
oConn.Open cst
%>

<%
getSQL = "Select distinct make From cars"
getSQL2 = "Select distinct model From cars"
set oRs = oConn.Execute(getSQL)
set oRs2 = oConn.Execute(getSQL2)
%>

<form name="form_one" action="response_page.asp" method="get">

<select id="cbomanu" name="form_make" size="1" onChange="dochange()">
<% oRs.MoveFirst
Do While Not oRs.EOF%>
<option><% =oRs("make")%><br>
<% oRs.MoveNext
Loop%>
</select>

<select id="cbobig" style="display:none" name="form_model" size="1">
<% oRs2.MoveFirst
Do While Not oRs2.EOF%>
<option value="manuid_modelid"><% =oRs2("model")%>
<% oRs2.MoveNext
Loop%>
</select>

<select id="cbomodel"></select>

<input type="submit" value="Search">
<input type="reset" value="Reset">

</form>

<%
oRs.close
oConn.close
%>

WestWoodster
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Well I managed to get it working using a script I found elsewhere, but your explanations really helped me understand how it works so here is your points.  Thanks a lot for your help! :)

WestWoodster
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.