Hiding/Showing div elements using Javascript

[John Zwick]

Can anyone explain why the following does not work?

   <script language="javascript">
  function toggleDiv(campaignType){
   if(campaignType==""){
      document.getElementById('insertTable').style.display == 'none';
      document.getElementById('messageTable').style.display == 'none';
   } else if(campaignType=="insert"){
      document.getElementById('insertTable').style.display == 'block';
      document.getElementById('messageTable').style.display == 'none';
   } else if(campaignType=="message"){
      document.getElementById('insertTable').style.display == 'none';
      document.getElementById('messageTable').style.display == 'block';
   }
  }
</script> 

However, this code works?

   <script language="javascript">
  function toggleDiv(campaignType){
   if(campaignType==""){
      if(document.getElementById('insertTable').style.display == 'block'){
         document.getElementById('insertTable').style.display = 'none';
         }
         if(document.getElementById('messageTable').style.display == 'block'){
         document.getElementById('messageTable').style.display = 'none';
         }
   } else if(campaignType=="insert"){
      if(document.getElementById('insertTable').style.display == 'none'){
         document.getElementById('insertTable').style.display = 'block';
         }
         if(document.getElementById('messageTable').style.display == 'block'){
         document.getElementById('messageTable').style.display = 'none';
         }
   } else if(campaignType=="message"){
      if(document.getElementById('messageTable').style.display == 'none'){
         document.getElementById('messageTable').style.display = 'block';
         }
         if(document.getElementById('insertTable').style.display == 'block'){
         document.getElementById('insertTable').style.display = 'none';
         }
   }
  } 

I dont understand why the second set of code works but the first doesnt.

Can someone please explain?

thanks!

[Ankit Garg]

Why are there double equals in your assignments ??

document.getElementById('insertTable').style.display == 'none

should be

document.getElementById('insertTable').style.display = 'none

[Eric Pascarello]

Ankit is correct

You can make the code more compact:


Readable:

function toggleDiv(campaignType){  
    var insertDisplay = "none";
    if((campaignType=="insert"){
        insertDisplay = "block";
    }
    else if(campaignType=="message"){
        messageDisplay = "block";
    }
    document.getElementById('insertTable').style.display = insertDisplay;  
    document.getElementById('messageTable').style.display = messageDisplay;  
}

or

Harder to read, but more compact

function toggleDiv(campaignType){  
    document.getElementById('insertTable').style.display = (campaignType=="insert")?"block":"none";  
    document.getElementById('messageTable').style.display = (campaignType=="message")?"block":"none";;  
}

Eric

[John Zwick]

wow you guys are awesome!

thanks a lot!

[John Zwick]

I have another question related to this:


The javascript is triggered by a dropdown list onchange event like so:

<td width="85%" align="left"><html:select
				property="campaignType" onchange="toggleDiv(this.value);">
				<html:option value="">
					<bean:message key="field.allCampaign" />
				</html:option>
				<html:option value="insert">
					<bean:message key="field.insert" />
				</html:option>
				<html:option value="message">
					<bean:message key="field.message" />
				</html:option>
			</html:select> <html:errors property="campaignType" /></td>

However this becomes a problem if the default selection of the dropdown is something else like "insert" or "message". Since there is no onchange event to trigger the javascript function, the appropriate div elements are not shown. How do I check for this when the page loads? Will have have to create another javascript function to check what the current value of the dropdown list is and show the appropriate div elements?

[Bear Bibeault]

Please do not show server-side markup in an HTML forum. Expand the markup to its generated HTML.

[John Zwick]

Bear Bibeault wrote:Please do not show server-side markup in an HTML forum. Expand the markup to its generated HTML.

oops, my bad

Here is the generated HTML:

    <td  ><select name="campaignType" onchange="toggleDiv(this.value);"><option value=""></option>
       <option value="insert">Insert</option>
       <option value="message">Message</option></select> </td>

[Eric Pascarello]

use onblur instead of onchange or call your function onload of the page.

Eric