Very Simple Set Display Value Using Dropdown 1

[RISTMO]

Hi,

It seems all my JavaScript skills disappeared when I learned php, cause I'm constantly finding myself stuck with simple Js problems. What I'm trying to do is obvious from the code. But it's not working.

<!--
function show_limits(that){
if(that.value==0){
document.getElementById("limit_to_state").style.display='none';
document.getElementById("limit_to_other").style.display='none';
} else if(that.value==1){
document.getElementById("limit_to_state").style.display='';
document.getElementById("limit_to_other").style.display='none';
} else if(that.value>1){
document.getElementById("limit_to_other").style.display='';
document.getElementById("limit_to_state").style.display='none';
}
//-->
</script>
<table border="0" cellspacing="1" cellpadding="4">
<form action="/view.php" method="post" name="orderby">
<input type="hidden" name="cat" value="NULL">
<tr>
<td>Limit Results to</td>
<td>
<select name="criteria" onchange="show_limits(this);">
<option value="0">Show All Trades</option>
<option value="1">State</option>
<option value="2">City</option>
<option value="3">Zip Code</option>
<option value="4">Area Code</option>
</select>
</td>
<td id="limit_to_state" style="display:none;">
<select name="limit_state">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="...">Etc...!!!</option>
</select>
</td>
<td id="limit_to_other" style="display:none;"><input type="text" name="limit_other" value=""></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Refresh"></td>
</tr>
</form>
</table>

I know it's been asked before, but I'd just like to get this working with as little hassle as possible. As always, stars go to the first person to submit a working script.

Thanks!
Rick

[URL unfurl="true"]http://www.ristmo.com/[/URL]
[URL unfurl="true"]http://www.arabchurch.com/[/URL]
[URL unfurl="true"]http://www.cashfutures.com/[/URL]
[URL unfurl="true"]http://www.word-tools.com/[/URL]

 

[Mr3Putt]

small flaw in your if/then/else setup for JS

if (something) {
  do something;
} else {
  if (something else) {
    do something else;
  } else {
    if (something entirely different) {
      do something entirely different;
    }
  }
}

You may also consider the SWITCH statement:

switch (that.value) {
  case 0:
    do the zero stuff;
    do more zero stuff;
    break; // get the heck outta here
  case 1:
    do the one stuff;
    do more one stuff;
    break; // get the heck outta here
  default:
    do default stuff;
    do more default stuff;
    break; // get the heck outta here
}

The 'break' statements are supposed to be implicit, but it's generally a good idea to throw them in, just to make sure none of your "down-the-line" statements get executed.

Hope that helps.

[red]Note:[/red] [gray]The above comments are the opinionated ravings of Mr3Putt. As such, Mr3Putt accepts no responsibility for damages, real or contrived, resulting from acceptance of his opinions as fact.[/gray]

 

[RISTMO]

That would be interesting. I didn't realize Js couldn't use else if()....but just changing that doesn't make it work. I used to use

if(that.options[this.selectedIndex].value==0){

instead of

if(that.value==0){

, but I tried the latter when the other didn't work. But still it's not working. I have to suspect that it has something to do with the actual code setting the style.display value for the <td>'s.

Any other ideas?

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[cLFlaVA]

Nothing wrong with else if. You need quotes around the values you're testing. May I suggest the following changes?

function show_limits(that){
    var st = document.getElementById('limit_to_state');
    var ot = document.getElementById('limit_to_other');
    var v = that.options[that.selectedIndex].value;

    if (v == '0') {
        st.style.display = 'none';
        ot.style.display = 'none';
    } else if (v == '1') {
        st.style.display = '';
        ot.style.display = 'none';
    } else {
        st.style.display = 'none';
        ot.style.display = '';
    }
}

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[RISTMO]

Awesome :-D. Thanks a bunch.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[RISTMO]

I started comparing our codes to see what the difference was, and except for yours being more concise, I couldn't find any differences....then I realized I didn't have an end "}" for my function :-/.

Thanks for helping!

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[cLFlaVA]

and you don't have quotations around your if clause...

if ( that.value == 0 )

is not the same as

if ( that.value == '0' )

Additionally, selectbox.value will not work properly in all browsers.

Other than that, small differences.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[RISTMO]

Ah, true. What would I have had to do to not use quotes? Doesn't js have a "convert to number" function?

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[cLFlaVA]

Yup, it's called parseInt.

if ( parseInt( "5" ) == 5 ) is how it would work.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[RISTMO]

Thanks.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/