Solved

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

Posted on 2004-03-31
8
215 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
0
Comment
Question by:WestWoodster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 8

Expert Comment

by:plq
ID: 10723246
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.
0
 

Author Comment

by:WestWoodster
ID: 10723843
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
0
 
LVL 8

Expert Comment

by:plq
ID: 10724025
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

0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:WestWoodster
ID: 10724417
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" :)
0
 
LVL 8

Expert Comment

by:plq
ID: 10724564
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
0
 

Author Comment

by:WestWoodster
ID: 10724881
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
0
 
LVL 8

Accepted Solution

by:
plq earned 500 total points
ID: 10724961
OK I don't know why the javascript is not recognising cbomodel, unless you;ve got more than one cbomodel on the page. Have you got a typo ?

You need to bring back make and model in ors2

You need to change manuid_modelid into <%=ors2("make")%>_<%=ors2("model")%> in the option value

and you're missing a </option> after the model name - maybe that upset IE

If you get stuck, run the page, do "view source" and put the source up here. Then I can try running it. Please bear in mind that points dont fill the fridge with beer.

thanks
0
 

Author Comment

by:WestWoodster
ID: 10733700
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
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to dynamically set the form action using jQuery.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question