Solved

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

Posted on 2004-03-31
8
209 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
  • 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

759 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now