Javascript to display multiple text box

ohcarol · 04-01-2013, 06:45 AM

Hello all,

I am trying to display two text box in javascript when option is selected, but I am not able to succeed. Below is the code:

function checkType(val)
{
if(val=="type1")
document.getElementById('fix_bw').style.display='block';
else
document.getElementById('fix_bw').style.display='none';
if(val==="type2")
document.getElementById('assure_bw').style.display='block';
else
document.getElementById('assure_bw').style.display='none';
if(val=="type3")
document.getElementById('max_bw').style.display='block';
document.getElementById('assure_bw').style.display='block';
else
document.getElementById('max_bw').style.display='none';
document.getElementById('assure_bw').style.display='none';
}

<tr>
<td bgcolor="E1E1FF">Bandwidth Type</td>
<td bgcolor="F4F4FF"><select name="bwtype" type="text" id="bwtype" size="1" onchange='checkType(this.value);' />
<option value="type1" title="Fixed Bandwidth" onmouseover="getText(this);">Type1</option>
<option value="type2" title="Assured Bandwidth" onmouseover="getText(this);">Type2</option>
<option value="type3" title="Assured + Maximum Bandwidth" onmouseover="getText(this);">Type3</option>
<option value="type4" title="Maximum Bandwidth" onmouseover="getText(this);">Type4</option>
<option value="type5" title="Fixed + Assured + Maximum Bandwidth" onmouseover="getText(this);">Type5</option></td>
<td bgcolor="E1E1FF">Fixed Bandwidth(Kbit/s):</td>
<td bgcolor="F4F4FF"><input name="fix_bw" type="text" id="fix_bw" style='display:block;' /></td>
</tr>
<tr>
<td height="25" bgcolor="E1E1FF">Assure Bandwidth(Kbit/s):</td>
<td bgcolor="F4F4FF"><input name="assure_bw" type="text" id="assure_bw" style='display:none;' / ></td>
<td height="25" bgcolor="E1E1FF">Max Bandwidth(Kbit/s):</td>
<td bgcolor="F4F4FF"><input name="max_bw" type="text" id="max_bw" size="18" style='display:none;' /></td>
</tr>

eSelix · 04-01-2013, 07:26 AM

You forgot about curly braces on "type3" check:

Code:

function checkType(val)
{
if(val=="type1")
  document.getElementById('fix_bw').style.display='block';
else
  document.getElementById('fix_bw').style.display='none';

if(val==="type2")
  document.getElementById('assure_bw').style.display='block';
else
  document.getElementById('assure_bw').style.display='none';

if(val=="type3")
  {
  document.getElementById('max_bw').style.display='block';
  document.getElementById('assure_bw').style.display='block';
  }
else
  {
  document.getElementById('max_bw').style.display='none';
  document.getElementById('assure_bw').style.display='none';
  }
}

Please also use a CODE tags around you code for better readability.

ohcarol · 04-01-2013, 08:49 AM

Hi,

I put curly braces in type3, now type2 is not displayed. Even I tried by putting/removing curly braces in type2. Any help?

function checkType(val)
{
//Display fix_bw box on selection of type1
if(val=="type1")
document.getElementById('fix_bw').style.display='block';
else
document.getElementById('fix_bw').style.display='none';
//Display assure_bw text box on selection of type2
if(val==="type2")
{
document.getElementById('assure_bw').style.display='block';
}
else
{
document.getElementById('assure_bw').style.display='none';
}
//Display both max_bw and assure_bw box on selection of type3
if(val=="type3")
{
document.getElementById('max_bw').style.display='block';
document.getElementById('assure_bw').style.display='block';
}
else
{
document.getElementById('max_bw').style.display='none';
document.getElementById('assure_bw').style.display='none';
}
}

Boring · 04-01-2013, 10:11 AM

Hi,

When type2 is selected, function checkType is called.

it will check val=="type1", if not equal to type1, it will run this:
document.getElementById('fix_bw').style.display='none';

Next, it will check val==="type2", if equal to type2, it will run this:
document.getElementById('assure_bw').style.display='block';

Next, it will check val=="type3", if not equal to type3, it will run this:
document.getElementById('max_bw').style.display='none';
document.getElementById('assure_bw').style.display='none';

Take note there, the 'assure_bw' become 'none';
type2 and type3 are calling the same ElementID 'assure_bw', type2 want it to display, but type3 want it not to display.
The last action win, which is type3 document.getElementById('assure_bw').style.display='none';
Therefore, type2 is not displayed.

ohcarol · 04-01-2013, 10:16 AM

Hi Boring,

So what will be the best option to display two input text box at once upon option selection? Please help me as I don't have much language of programming.

thank you

eSelix · 04-01-2013, 10:19 AM

Well, your logic code is broken. When you select "type2" option then "else" block from "type3" is also executed, which hide "assure_bw". Use this code:

Code:

function Show(aId, aState)
  {
  document.getElementById(aId).style.display = aState ? 'block' : 'none';
  }


  
function checkType(val)
  {
  Show('fix_bw', (val == "type1"));
  Show('assure_bw', (val == "type2") || (val == "type3"));
  Show('max_bw', (val == "type3"));
  }

That way you can easily add another conditions, when and what should be displayed.

ohcarol · 04-01-2013, 10:52 AM

Thank you eSelix, It solved my problem.

thank you very much