Web Analytics Made Easy -
StatCounter show hide problems - CodingForum

Announcement

Collapse
No announcement yet.

show hide problems

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • show hide problems

    Hi,
    i am using this show/hide function
    Code:
    <script type="text/javascript"><!--
    var lastDiv1 = "";
    function showDiv1(divName) {
    	// hide last div
    	if (lastDiv1) {
    		document.getElementById(lastDiv1).className = "hiddenDiv";
    	}
    	//if value of the box is not nothing and an object with that name exists, then change the class
    	if (divName && document.getElementById(divName)) {
    		document.getElementById(divName).className = "visibleDiv";
    		lastDiv1 = divName;
    	}
    }
    //-->
    
    </script>
    
    <style type="text/css" media="screen"><!--
    .hiddenDiv {
    	display: none;
    	}
    .visibleDiv {
    	display: block;
    	border: 1px grey solid;
    	}
    
    --></style>
    </script>
    
    <script type="text/javascript"><!--
    var lastDiv2 = "";
    function showDiv2(divName) {
    	// hide last div
    	if (lastDiv2) {
    		document.getElementById(lastDiv2).className = "hiddenDiv";
    	}
    	//if value of the box is not nothing and an object with that name exists, then change the class
    	if (divName && document.getElementById(divName)) {
    		document.getElementById(divName).className = "visibleDiv";
    		lastDiv2 = divName;
    	}
    }
    //-->
    
    </script>
    
    <style type="text/css" media="screen"><!--
    .hiddenDiv {
    	display: none;
    	}
    .visibleDiv {
    	display: block;
    	border: 1px grey solid;
    	}
    
    --></style>
    </script>
    I have a drop down list with three choices, Yes, No and Not Applicable. For instance I select only Yes for the show/hide function then the date text box comes up...

    Now i have added the "No" as well, for instance, when the user selects "NO", "Meeting Offered" drop down should come up. But my problem is now i have to do it for Not Applicable(NA) and it is not working?? In other words, when the user clicks on NA some "Meeting Offered" drop down box should come up,

    can anybody can help please???

    This is my form with the drop down box:
    Code:
    <select name="Skip_Level_Meeting" size="1" onchange="showDiv1(this.value);" >
    
                                                    <option value="" >Choose One...</option >
    
                                                    <option value="Yes" >Yes</option>
    
                                                    <option value="No" >No</option>
    
                                                    <option value="N/A">N/A (I have declined to take up this opportunity)
    
                                                    </option>
    
                                        </select ><br>
    
                
    
                <p id="Yes" class="hiddenDiv">
    
                            
    
                <font size="2" face="Times New Roman">8)Date
    
              <input type="text" id="cal3" name="SLM_Date" value="<%=Request.Form("SLM_Date")%>" size="13" />
    
             <input type="image" name="submit10" img src="calender/calender.bmp" id="calb3" width="30" height="31" start="fileopen"></font>          <font face=" Times New Roman">
    
                <font size="2" face="Times New Roman">
    
              
    
              <script type="text/javascript">
    
                Calendar.setup({
    
                  inputField    : "SLM_Date",
    
                  button        : "calb3",
    
                  align         : "Tr"
    
                });
    
              </script>
    
              
    
              
    
              
    
         <p id="No" class="hiddenDiv">
    
              <legend>&nbsp;</legend>
    
              9) Meeting Offered 
    
                 
    
                 <select name="SLM_Meeting_Offered" size="1" onchange="showDiv2(this.value);" >
    
                                                    <option value="" >Choose One...</option >
    
                                                    <option value="Yes 1 " >Yes</option>
    
                                                    <option value="No 1 " >No</option>
    
                                        </select ><br>
    
                                        
    
                            
    
     
    
                
    
                <p id="Yes 1 " class="hiddenDiv">
    
                
    
                10</font><font face="Times New Roman" size="5"><font size="2" face="Times New Roman">) 
    
                Date offered 
    
                <input type="text" id="cal9" name="SLM_Date_Offered" value="<%=Request.Form("SLM_Date_Offered")%>" size="13" />
    
              <input type="image" name="submit11" img src="calender/calender.bmp" id="calb9" width="30" height="31" start="fileopen"></font>
    
              <script type="text/javascript">
    
                Calendar.setup({
    
                  inputField    : "SLM_Date_Offered",
    
                  button        : "calb9",
    
                  align         : "Tr"
    
                });
    
              </script>

  • #2
    You are asking to show the div with the id of "N/A" and of course there is NO SUCH div.

    That is, your code is looking for
    Code:
        <div id="N/A">
    But that won't work in all browsers, anyway. IDs should be legit JavaScript names or MSIE will have problems.

    Anyway, you just have to have a <DIV> with an ID that matches the VALUE= of the appropriate <OPTION>.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Originally posted by Old Pedant View Post
      You are asking to show the div with the id of "N/A" and of course there is NO SUCH div.

      That is, your code is looking for
      Code:
          <div id="N/A">
      But that won't work in all browsers, anyway. IDs should be legit JavaScript names or MSIE will have problems.

      Anyway, you just have to have a <DIV> with an ID that matches the VALUE= of the appropriate <OPTION>.
      Below is a basic mock up of what i want:

      when the user selects Yes the date box comes up,
      when the user selects No, the ANOTHER DATE box SHOULD come up
      and when the user selects NA, ANOTHER DATE box should come up..

      Yes, and NA work perfectly, but NO does not...,

      if you can help me with this that would be magic!

      Code:
      <script type="text/javascript"><!--
      var lastDiv1 = "";
      function showDiv1(divName1) {
      	// hide last div
      	if (lastDiv1) {
      		document.getElementById(lastDiv1).className = "hiddenDiv1";
      	}
      	//if value of the box is not nothing and an object with that name exists, then change the class
      	if (divName1 && document.getElementById(divName1)) {
      		document.getElementById(divName1).className = "visibleDiv1";
      		lastDiv1 = divName1;
      	}
      }
      //-->
      
      </script>
      
      <style type="text/css" media="screen"><!--
      .hiddenDiv1 {
      	display: none;
      	}
      .visibleDiv1 {
      	display: block;
      	border: 1px grey solid;
      	}
      
      --></style>
      </script>
      
      
      <select name="Test" size="1" onchange="showDiv1(this.value);" >
      <option value="" >Choose One...</option >
      <option value="Yes" >Yes</option>
      <option value="No" >No</option>
      <option value="NA">N/A</option>
      </select >
      <br>
      	
      <p id="Yes" class="hiddenDiv1">
      Date <input type="text" name="Date" size="20">
      </p>
      
      <p id="No" class="hiddenDiv1">
      </p>
      <p id="NA" class="hiddenDiv1">
      Another Date <input type="text" name="Another Date" size="20">
      </p>

      Comment


      • #4
        Code:
        <p id="No" class="hiddenDiv1">
        Another Date <input type="text" name="Another Date" size="20">
        </p>
        Or am I not understanding your question?

        Obviously Another Date can be Yet Another Date is desired.



        Quizmaster: What was the principal language spoken by the ancient Romans?
        Contestant: Greek

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          Originally posted by Philip M View Post
          Code:
          <p id="No" class="hiddenDiv1">
          Another Date <input type="text" name="Another Date" size="20">
          </p>
          Or am I not understanding your question?

          Obviously Another Date can be Yet Another Date is desired.



          Quizmaster: What was the principal language spoken by the ancient Romans?
          Contestant: Greek
          creating a new instance of Another date, is not good, as when you send the information to the database it will send a blank value as well as the value the user puts into the box..

          Comment


          • #6
            Well, here's another idea:-


            //if value of the box is not nothing and an object with that name exists, then change the class
            if (divName1 == "No") {divName1 = "NA"}

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              Originally posted by Philip M View Post
              Well, here's another idea:-


              //if value of the box is not nothing and an object with that name exists, then change the class
              if (divName1 == "No") {divName1 = "NA"}
              can you show me where in the code? coz its not working for me..

              cheers

              Comment


              • #8
                Originally posted by wbva View Post
                can you show me where in the code? coz its not working for me..

                cheers
                Well, it works for me, and I have indicated where to place the additional line quite clearly:

                Code:
                //if value of the box is not nothing and an object with that name exists, then change the class
                [COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
                if (divName && document.getElementById(divName)) {
                		document.getElementById(divName).className = "visibleDiv";
                		lastDiv2 = divName;
                	}
                }

                All the code given in this post has been tested and is intended to address the question asked.
                Unless stated otherwise it is not just a demonstration.

                Comment


                • #9
                  Originally posted by Philip M View Post
                  Well, it works for me, and I have indicated where to place the additional line quite clearly:

                  Code:
                  //if value of the box is not nothing and an object with that name exists, then change the class
                  [COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
                  if (divName && document.getElementById(divName)) {
                  		document.getElementById(divName).className = "visibleDiv";
                  		lastDiv2 = divName;
                  	}
                  }
                  it does not work.. try it for yourself... and see..

                  Code:
                  <html>
                  
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                  <title>Test</title>
                  </head>
                  
                  <body>
                  
                  <script type="text/javascript"><!--
                  var lastDiv1 = "";
                  function showDiv1(divName1) {
                  	// hide last div
                  	if (lastDiv1) {
                  		document.getElementById(lastDiv1).className = "hiddenDiv1";
                  	}
                  	//if value of the box is not nothing and an object with that name exists, then change the class
                  	if (divName1 && document.getElementById(divName1)) {
                  		document.getElementById(divName1).className = "visibleDiv1";
                  		lastDiv1 = divName1;
                  	}
                  	
                  //if value of the box is not nothing and an object with that name exists, then change the class
                  if (divName1 == "No") {divName1 = "NA"}
                  if (divName && document.getElementById(divName)) {
                  		document.getElementById(divName).className = "visibleDiv";
                  		lastDiv2 = divName;
                  	}
                  }
                  //-->
                  
                  </script>
                  
                  <style type="text/css" media="screen"><!--
                  .hiddenDiv1 {
                  	display: none;
                  	}
                  .visibleDiv1 {
                  	display: block;
                  	border: 1px grey solid;
                  	}
                  
                  --></style>
                  </script>
                  
                  
                  <select name="Test" size="1" onchange="showDiv1(this.value);" >
                  <option value="" >Choose One...</option >
                  <option value="Yes" >Yes</option>
                  <option value="No" >No</option>
                  <option value="NA">NA</option>
                  </select >
                  <br>
                  	
                  <p id="Yes" class="hiddenDiv1">
                  Date <input type="text" name="Date" size="20">
                  </p>
                  
                  <p id="No" class="hiddenDiv1">
                  
                  <p id="NA" class="hiddenDiv1">
                  Another Date <input type="text" name="Another Date" size="20">
                  </p>
                  
                  </body>
                  
                  </html>

                  Comment


                  • #10
                    What on earth are you doing? Simply add the line in blue.

                    Code:
                    var lastDiv1 = "";
                    function showDiv1(divName1) {
                    	// hide last div
                    	if (lastDiv1) {
                    		document.getElementById(lastDiv1).className = "hiddenDiv1";
                    	}
                    	//if value of the box is not nothing and an object with that name exists, then change the class
                    [COLOR="Blue"]if (divName1 == "No") {divName1 = "NA"}[/COLOR]
                    	if (divName1 && document.getElementById(divName1)) {
                    		document.getElementById(divName1).className = "visibleDiv1";
                    		lastDiv1 = divName1;
                    	}
                    }
                    //-->

                    All the code given in this post has been tested and is intended to address the question asked.
                    Unless stated otherwise it is not just a demonstration.

                    Comment

                    Working...
                    X