CODEWITHSUNDEEP
javascripthtml
edvinedi
edvinedi

Reputation: 21

Javascript hide show object

This code doesn't work, why?

<script>
function color(color_type){
    if (color_type == 'blue'){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}
</script>

<select onchange="color(this.value)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
   <?
   //
   echo "<tr>
<td width='100' class='tbl'>Just ask</td>
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr>";
   //
   ?>
</div>

<div id="blue" style="display:none;">
      <?
   //
   echo "<tr>
<td width='100' class='tbl'>Just ask blue</td>
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td>
</tr>";
   //
   ?>
</div>

Td table doesn't hidden, every time show this table. I need that when I chose blue or red show only "Just ask blue" or "Just ask" table.

P.S sorry for my bad english language

Upvotes: 2

Views: 4832

Answers (3)

Epiphany
Epiphany

Reputation: 1894

First, the HTML. Pass your function the select object, but determine the selected value from within the javascript function and not the HTML. Simplify your select as shown below. The additional id attribute is not required for it to work, it's just good programming practices these days to provide a reference you can use.

<select id="color_choice" onchange="color(this)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

Now you can determine the value of the select using javascript. With your example, the change would be as shown below

function color( choices ){

    var color_type = choices.options[ choices.selectedIndex ].value;

    if ( color_type == 'blue' ){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}

Upvotes: 1

Craig
Craig

Reputation: 4399

Because you have generated invalid HTML. You can't wrap TABLE elements in DIV elements, since it does not conform to HTML standards (or any HTML compliance for that matter). If you want to hide rows, assign the ID's to the TR elements and lose the DIV's:

<?
//
echo "<tr id='blue' style='display:none;'>
    <td width='100' class='tbl'>Just ask</td>
    <td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr>";
//
?>

Upvotes: 0

James Nicholson
James Nicholson

Reputation: 973

Well your wrapping a div around a element which is the basis of the table. basicly your html structure is wrong.

<div id="red" style="display:none;">
   <?
   //
   echo "<table><tr>
<td width='100' class='tbl'>Just ask</td>
<td width='80%' class='tbl'><input type='text' name='1' value='$n1' class='textbox' style='width: 250px'></td>
</tr></table>";
   //
   ?>
</div>

<div id="blue" style="display:none;">
      <?
   //
   echo "<table><tr>
<td width='100' class='tbl'>Just ask blue</td>
<td width='80%' class='tbl'><input type='text' name='2' value='$n2' class='textbox' style='width: 250px'></td>
</tr></table>";
   //
   ?>
</div>

Have a look at the basic structure of a HTML table

http://www.w3schools.com/html/html_tables.asp

Upvotes: 2

Related Questions