text box, combos boxes and text links help 1

[scribbler]

Can anyone please assist me. I have an asp page which contains a form and within this form I have, amongst other items, a text box, 2 combo boxes(1 visible & 1 hidden) both the combos contain set lists. What I am trying to achieve is that if a numeric value is entered into the text box then combo1=hidden and combo2=visible

AND depending upon what is selected in the visible combo box I wish to display some relevant text as the combos hold an abrieviation of the actual text.

I know I can sort of achieve this by posting my asp page back to itself and refreshing it but from what I can see it would be smarter to use javascript, of which I know very little. I know I should take time out to learn it as Im becoming more reliant of its use but from HTML, ASP, SQL and Flash My brains getting fried.

 

[LFI]

I will assume you know a little JavaScript, but don't hesitate to let on that you don't understand what I'm saying here.

First, there is a "built-in" JavaScript function called isNaN(...) which takes a variable as a parameter and returns the boolean value 'true' if the parameter argument is Not a Number. You can use this to determine if the value entered in the text box is a number or not. You can add a button that fires a function you write which includes this check.

Inside the function you write, you have an if-block. If the isNaN(...) function returns true, ensure the first combo box (drop-down list/select list) is visible and the other is invisible; otherwise, the reverse.

Wrap both combo boxes in DIV tags. Initially, the first DIV tag will include: style='display:block' and the other style='display:none'. Each should have a unique id parameter as well and it is by referencing these id parameters in the JavaScript function you will write that hides one and reveals the other. For example:

if(isNaN(document.myForm.myTextBox.value))
{
 document.getElementById(comboBox1Id).style.display = 'none';
 document.getElementById(comboBox2Id).style.display = 'block';
}
else
{
 //the reverse
}

As for the text you want to show up, add another DIV tag to your page, with its own unique id. Call a function that you will write for each combo box's onchange event. Send the value of the combo box as the parameter and then have the function fill the innerHTML of the DIV with this value. If you're following this, then you might guess that the value of each option of the drop-down list must be the full text you want displayed.

Finally, you probably want to set that same DIV's innerHTML to blank ('') when the combo boxes switch their visibility status.

Did this make sense? Can you implement this or some of this on your own?

--Dave

 

[scribbler]

Cheers for the reply Dave. Please forgive my ignorance in using javascript as I know it plays a major part on the web but Ive had a job to understand the little html , asp, flash etc as it is.

I have seen the isNaN(...) function before so Im ok there but can I use the onchange event on the text box attribute to start this function. ?

I haven't used the style='display:block' before but I think I get what your saying here.

I understand the code you supplied and to add the text inside another DIV tag.

The function to be called on the combo boxes change event -- the 2nd combo contains a shortened list of the first combo so am I right in saying that I could use 1 function for both boxes although I'm unsure how to do this in javascript. ? and also would I not have a problem if say the 1st combo had been selected but then becomes hidden as the user may have enetered some value into the textbox. Iguess I'd hav eto clear out any values in the combos on the change event of the text box also.

 

[LFI]

onchange for the textbox will be fine. Keep in mind that focus has to 'blur' (user must click or tab out of the box for event to fire).

You can use the same function for both combobox-onchange events.

I don't know what you want to do WITH the value in the textbox (beyond checking on whether or not it's a number), but here is an example of what we've been talking about. I've done a few things in it just for grins and some of it, unnecessarily. I like to write little test codes to make sure what I'm saying is correct. Check it out if you like:

<html>
<head>
<script>
function switchBoxes(val)
{
 var box1Div = document.getElementById('comboBox1Div');
 var box1 = document.myForm.comboBox1;
 var box2Div = document.getElementById('comboBox2Div');
 var box2 = document.myForm.comboBox2;

 if(isNaN(val))
 {
  if(box2Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box2Div.style.display = 'none';
   box2.selectedIndex = -1;
   box1Div.style.display = 'block';
  }//end if
 }//end if
 else
 {
  if(box1Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box1Div.style.display = 'none';
   box1.selectedIndex = -1;
   box2Div.style.display = 'block';
  }//end if
 }//end else
}//end switchBoxes(var)

function showValue(val)
{
 valueDiv.innerHTML = val;
}//end showValue(val)
</script>
</head>
<body>
<form name='myForm' onsubmit='return false'>
<input type='text' onchange='switchBoxes(this.value);' size='30' /><br />
<div id='comboBox1Div' style='display:block'>
<select name='comboBox1' onchange='showValue(this.value);'>
<option value='One is the loneliest number that there ever was.'>One</option>
<option value='Two is the loneliest number next to One.'>Two</option>
</select>
<script>
document.myForm.comboBox1.selectedIndex = -1;
</script>
</div>
<div id='comboBox2Div' style='display:none'>
<select name='comboBox2' onchange='showValue(this.value);'>
<option value='Hey is for horses!'>Hey</option>
<option value='I am rubber and you are glue.'>Glue</option>
</select>
<script>
document.myForm.comboBox2.selectedIndex = -1;
</script>
</div>
<div id='valueDiv'></div>
</form>
</body>
</html>

Let me (us!) know if you have any questions about this or further questions about your needs.

--Dave

 

[scribbler]

Much appreciated Dave

I pasted your code and have looked how it operates and it looks perfect for my purpose. I will go back to study the code to get an understanding how it works and hopefully it will help me understand javascript a bit better.

Thanks for taking the time to reply in such detail.

Colin

 

[LFI]

Pleasure, Colin! Thanks for the star...

--Dave

 

[scribbler]

I tested this with my options etc and it worked well except that if the 1st combo box has data entered the code works fine but if then it's contents are deleted what should happen is that the 2nd combo should revert to hidden and the 1st combo should be visible again.

I thought Id be okay adding another else if statement

else if val.length < 0

but that didn't work

 

[LFI]

Are you defining a combo box as a combination of the text box and drop-down list? I THINK I understand what you're asking.

Make the first line of the switchBoxes function:

if(!val || val == null || val == '')
{
switchBoxes(0);
return;
}

I have those different ways of expressing val because I find I either have to test which one it is each time I write something like this or I can just put them all in!

I believe then, that when your text box is empty, it will do what you need.

--Dave

 

[scribbler]

Hi Dave
Did you mean the following ? as if so I get an error "Out Of Memory at line 6"

<html>
<head>
<script>
function switchBoxes(val)
{
 var box1Div = document.getElementById('comboBox1Div');
 var box1 = document.myForm.comboBox1;
 var box2Div = document.getElementById('comboBox2Div');
 var box2 = document.myForm.comboBox2;

if(!val || val == null || val == '')
{
 switchBoxes(0);
 return;
}
if(isNaN(val))
 {
  if(box2Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box2Div.style.display = 'none';
   box2.selectedIndex = -1;
   box1Div.style.display = 'block';
  }//end if
 }//end if
else
 {
  if(box1Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box1Div.style.display = 'none';
   box1.selectedIndex = -1;
   box2Div.style.display = 'block';
  }//end if
 }//end else
}//end switchBoxes(var)

function showValue(val)
{
 valueDiv.innerHTML = val;
}//end showValue(val)
</script>
</head>
<body>
<form name='myForm' onsubmit='return false'>
<input type='text' onchange='switchBoxes(this.value);' size='30' /><br />
<div id='comboBox1Div' style='display:block'>
<select name='comboBox1' onchange='showValue(this.value);'>
<option value='One is the loneliest number that there ever was.'>One</option>
<option value='Two is the loneliest number next to One.'>Two</option>
                          <OPTION  value=1-1>1-1</OPTION>
                          <OPTION  value=3ADV selected>3ADV</OPTION>
                          <OPTION  value=3ADVTP>3ADVTP</OPTION>
                          <OPTION  value=ANA>ANA</OPTION>
                          <OPTION  value=MIARR>MIARR</OPTION>
                          <OPTION  value=6ADVSPR>6ADVSPR</OPTION>

</select>
<script>
document.myForm.comboBox1.selectedIndex = -1;
</script>
</div>
<div id='comboBox2Div' style='display:none'>
<select name='comboBox2' onchange='showValue(this.value);'>
                          <OPTION  value=1-1 selected>1-1</OPTION>
                          <OPTION  value=3ADVTP>3ADVTP</OPTION>
                          <OPTION  value=MIARR>MIARR</OPTION></select>
<script>
document.myForm.comboBox2.selectedIndex = -1;
</script>
</div>
<div id='valueDiv'></div>
</form>
</body>
</html>

 

[LFI]

HA! The boolean value of !val when val=0 translates to TRUE so it goes in an endless loop! Change it the new function call to switchBoxes(1)!

--Dave

 

[scribbler]

I changed the value to 1 as below and now dont get the error except that Im left with the initial problem in that once fata is entered into the 1st combo and then deleted, leaving the combo empty, the combos original state is not returned.

<html>
<head>
<script>

function switchBoxes(val)
{
 var box1Div = document.getElementById('comboBox1Div');
 var box1 = document.myForm.comboBox1;
 var box2Div = document.getElementById('comboBox2Div');
 var box2 = document.myForm.comboBox2;

if(!val || val == null || val == '')
{
 switchBoxes(1);
 return;
}
if(isNaN(val))
 {
  if(box2Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box2Div.style.display = 'none';
   box2.selectedIndex = -1;
   box1Div.style.display = 'block';
  }//end if
 }//end if
else
 {
  if(box1Div.style.display == 'block')
  {
   valueDiv.innerHTML = '';
   box1Div.style.display = 'none';
   box1.selectedIndex = -1;
   box2Div.style.display = 'block';
  }//end if
 }//end else
}//end switchBoxes(var)

function showValue(val)
{
 valueDiv.innerHTML = val;
}//end showValue(val)
</script>
</head>
<body>
<form name='myForm' onsubmit='return false'>
<input type='text' onchange='switchBoxes(this.value);' size='30' /><br />
<div id='comboBox1Div' style='display:block'>
<select name='comboBox1' onchange='showValue(this.value);'>
<option value='One is the loneliest number that there ever was.'>One</option>
<option value='Two is the loneliest number next to One.'>Two</option>
<OPTION  value=1-1>1-1</OPTION>
<OPTION  value=3ADV selected>3ADV</OPTION>
<OPTION  value=3ADVTP>3ADVTP</OPTION>
<OPTION  value=ANA>ANA</OPTION>
<OPTION  value=MIARR>MIARR</OPTION>
<OPTION  value=6ADVSPR>6ADVSPR</OPTION>
</select>
<script>
document.myForm.comboBox1.selectedIndex = -1;
</script>
</div>
<div id='comboBox2Div' style='display:none'>
<select name='comboBox2' onchange='showValue(this.value);'>
<OPTION  value=1-1 selected>1-1</OPTION>
<OPTION  value=3ADVTP>3ADVTP</OPTION>
<OPTION  value=MIARR>MIARR</OPTION></select>
<script>
document.myForm.comboBox2.selectedIndex = -1;
</script>
</div>
<div id='valueDiv'></div>
</form>
</body>
</html>

 

[LFI]

I got your boxes backwards. Try switchBoxes('x') instead. Do you understand what's happening here? It basically says that (using the corrected function call), "in the event the text box is empty, behave as if isNaN(...) is true."

--Dave

 

[scribbler]

Still doesn't work so far as restoring the state of the combo if the text box contents are deleted.

Im not quote following what the following code is with the pipe signs

if(!val || val == null || val == '')
{
 switchBoxes(1);
 return;
}

 

[LFI]

Basically, it's saying, if there is no value for val, then execute what's inside the curly-braces.

!val returns true when val == false (boolean value), when val == 0 (the only number regarded as 'false'), or when val doesn't exist (typically when it's null).

val == null returns true when val has never been assigned a value or is assigned a null value (which might be what happens when there is no value in the text box).

val == '' returns true when the value assigned to val is an empty string.

The pipe symbols are "or" symbols, so the statement means that "if !val is true OR val is null OR val has a value of an empty string then execute what is inside these curly braces".

Calling switchBoxes(1) sends a val of 1 to this function, so a few things will happen:
!val will return false, making the whole or-statement false and, thus, skip the curly braces

isNaN(val) will return false since 1 IS a number and the else-statement will fire, hiding box 1.

To hide box 2, then, send an 'x' or some other non-number so isNaN(val) will return true and hide box 2/reveal box 1.

When execution is done, control will go back to where switchBoxes('x') was called. To avoid the rest of the function from executing again, we put the return command in there.

Remember, it's not enough to delete the text box contents. You need to remove focus from there so the 'onchange' event fires.

Does this make sense?

--Dave

P.S., I'm going to be leaving my desk in about five minutes, so I may not be able to get back to you tonight if you have further questions.

 

[scribbler]

Cheers Dave

Im gonna write this out and hope that it sinks in whats happening.