CODEWITHSUNDEEP
javascriptdom-events
andrew
andrew

Reputation: 5176

Toggle visibility of div with JavaScript

I think the problem was I was writing .innerHtml and overwriting the form elements, is that correct, sorry to waste your time.

I am trying to toggle the visibility of a div containing some form elements. The idea is that if the person selects a particular value of a select box an onchange event handler will make a particular div containing those form elements disappear.When they choose any other option the div will reappear.

if(chosen_option != option_that_makes_id dissappear){
  document.getElementById(id).style.visibility = 'hidden';
                document.getElementById(id).innerHTML = 'the if statement is working';
}else if(chosen_option == option_that_makes_id dissappear){
  document.getElementById(id).style.visibility = 'visible';

}

The problem I am having is the the div will disappear properly but then when I select another value from the check list the div reappears but no longer contains the form values.

I put the .innerHTML in the if statement and then when that condition is met I just see the text the if statement is working but not the form elements. Is this a feature of JavaScript or is am I doing something wrong?

Here is the full unedited JavaScript function:

function change_div_visibility(id,select_id,div){//id is the id of the select box and the name of the div which you want to change the visibility of .
 var select_option = document.getElementById(select_id).options;
 var chosen_option = select_option[select_option.selectedIndex].value;
 if(chosen_option != id){
  document.getElementById(div).style.display = 'block';
  document.getElementById(div).innerHTML = 'the if statement is working';
 }else if(chosen_option == id){
  document.getElementById(div).style.display = 'none';
  document.getElementById(div).innerHTML = 'the else statement is working but for some reason the visibility of the div is not changing. ';
 }
}

and the section of the form which I am trying to manipulate:

<p><label for='buying_options'>Select Buying Option</label><select onchange=\"change_div_visibility('new_buying_1','buying_options1','div1')\" id='buying_options1' name='buying_options1'><option value='undefined'>Select Buying Option</option>
   <option value='new_buying_1'>New Buying Option</option>";
   $y = '';
   foreach($buying_options_arr as $key=>$value){
            $x.= "<option value='$key' >$value</option>";
   $y.= '&lt;option value='.$key.'&gt;'.$value.'&lt;/option&gt;';
   }
        $x.= "</select> or</p> ";
  $x.= "<div id='div1' >
  <p><label for='add_new_buying_option'>Add new Buying Option: </label><input id='add_new_buying_option' type='text' name='add_new_buying_option1' /></p>\n";
  $x.= "<p><label for='compression' >New Unit Quantity: </label><input type='text' id='compression' name='unit_quantity1' /></p>\n
  ";

Upvotes: 2

Views: 735

Answers (1)

No Refunds No Returns
No Refunds No Returns

Reputation: 8336

Have you tried changing style.display to 'none' or 'block' instead?

Upvotes: 1

Related Questions