www.webdeveloper.com
Results 1 to 9 of 9

Thread: show/hide using select box

  1. #1
    Join Date
    Jan 2008
    Posts
    5

    Question show/hide using select box

    hi i have some which is not working fine with me:, what i am trying to achieve is to show/toggle the elements when i click one or the other thing from the select menu

    here is my code below:

    HTML Code:
    <SELECT NAME="ptype" onchange="toggleSubmit(this);">
          <option value="Contract">Contract</option>
          <option value="Direct_hire">Direct Hire</option>
    </select>
    now the javascript i am using:

    HTML Code:
    HTML Code:
    <script language=javascript type='text/javascript'>
    function toggleSubmit(sel)
    {
    var area = document.getElementById('contract');
    if ( sel.options[sel.selectedIndex].value == "Contract" ) 
    {
    Contract.style.display = "block";
    } 
    else 
    {
    Direct_hire.style.display = "block";
    }
    
    } </script>
    now te which which gets egffected..

    HTML Code:
    <tr id="Contract" style="display: none;">
    <td>
      <CFIF Form.ptype EQ "Contract">
        <TR>
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>NUMBER OF CONTRACTORS</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="c_numcontractors" VALUE="hidden" required="yes" message="Please fill No of Contractors for it."></TD>
        </TR>
     </CFIF>
    </td></tr> 
    <tr id="Direct_hire" style="display: none;">
    <td>
      <CFIF ptype EQ "Direct hire">
        <TR id="Direct hire" style="display:none;">
          <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>TARGET COMPENSATION</B></FONT></TD>
        </TR>
        <TR>
          <TD WIDTH=30>&nbsp;</TD>
          <TD COLSPAN=2><cfINPUT TYPE=text NAME="h_compensation" VALUE="#Form.h_compensation#" size=25 required="yes" message="Target Compensation field required"></TD>
        </TR>
    	
      </CFIF></td></tr>
    if div can be placed with the above tr to work properly, it can be done, can u let me know how to achieve that plz

    i am new in javascripting

  2. #2
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    Here are 2 small functions you can use to show and hide any html element.
    Code:
    function showEl(id)
    {
    	var element = document.getElementById(id);
    	element.style.display = "";
    }
    
    function hideEl(id)
    {
    	var element = document.getElementById(id);
    	element.style.display = "none";
    }
    You need to pass the elements ID you want to show or hide.
    Here is a sample

    Code:
    <div id="myElementID"> Hello World </div>
    <a href="#" onclick="hideEl('myElementID')" > CLick to Hide </a>
    <a href="#" onclick="showEl('myElementID')" > CLick to Show</a>
    Hope this helps you out.

    Drew

  3. #3
    Join Date
    Jan 2008
    Posts
    5
    weel thanks mate, but gravity of condition says i am not in a position to change the code and i do not want to show/hide sorry for the bad title, just want to toggle the elemnts..

    like at the very first first when the page will be loaded, the CONTRACT will be selected and its option will be shown which are described using the

    <tr id="Contract" style="display: none;">
    <td>
    <CFIF Form.ptype EQ "Contract">
    <TR>
    <TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>NUMBER OF CONTRACTORS</B></FONT></TD>
    </TR>
    <TR>
    <TD WIDTH=30>&nbsp;</TD>
    <TD COLSPAN=2><cfINPUT TYPE=text NAME="c_numcontractors" VALUE="hidden" required="yes" message="Please fill No of Contractors for it."></TD>
    </TR>
    </CFIF>
    </td></tr>

    and then if i use the direct_hire, the Contract should be gone and instead of that direct hire options should display..

  4. #4
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    so you say:
    When Contract is selected show the contract options.
    When Direct Hire is selected, contracts should be gone and then display direct hire options?

    I think my code will work for you,
    it will toggle things on and off.

    then again, maybe i am not understanding the questions.

    Drew

  5. #5
    Join Date
    Jan 2008
    Posts
    5
    When Contract is selected show the contract options.
    When Direct Hire is selected, contracts should be gone and then display direct hire options?

    but initially the Contact and its options should be shown and i am using the select option to do it..

    and buddy i am very new to javascript , your script is quite simple and understandable and can u plz guide me more how should i do it using the select box events and trigger this all

    Cheers and Thanks buddy

  6. #6
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Here's another possibility

    Code:
    <script type='text/javascript'>
    
    function toggleSubmit(obj){
    
    count=0
    while(document.getElementById("d"+count)){
    document.getElementById("d"+count).style.display="none"
    count++
    }
    document.getElementById("d"+obj.selectedIndex).style.display="block"
    
    }
    </script>
    
    <SELECT id="ptype" NAME="ptype" onchange="toggleSubmit(this)">
    <option value="Contract">Contract</option>
    <option value="Direct_hire">Direct Hire</option>
    </select>
    
    <div id="d0" style="display:block">NUMBER OF CONTRACTORS</div>
    <div id="d1" style="display:none">TARGET COMPENSATION</div>
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  7. #7
    Join Date
    Jul 2012
    Posts
    1
    as my name states, I'm sort of an amateur with no professional training or certification. But I've been working with HTML for a number of years and am just starting to delve in to other programming languages.

    This thread has been immensely helpful as I have a project I've been trying to complete where the client has requested an "Availability Status" on our home sharepoint page.

    Our sharepoint access is limited so I've just been using HTML web parts which has worked well for me so far, but for this project I decided that the best option would be to create a simple table with a drop-down menu next to each member of leadership where they can change their availability status.

    I've adopted the above coding and it looks great, but only the top leader's status changes and each of the other statuses change the top leader's status as well. I'm wondering what it would take to make each leader's status individual to the drop-down menu next to their name, and make it so that status remains static regardless of whether the page is closed or opened/refreshed, so that people working under that leader can check the status by looking at the sharepoint page.

    Any help is appreciated, and I hope I'm not hijacking this thread.

    tl:dr; need static drop-down menus, using the previously posted code, for multiple td rows on top of each other. Much thanks.

  8. #8
    Join Date
    Nov 2007
    Posts
    409
    You have TRs nested inside TDs... without changing the HTML, you are hosed.
    The following code *should* work, but the improper nesting of the elements makes it not work right. Save the following as an HTML page and see it work. Now replace the TABLE with the table that the page uses and see how it messes up. The issue is that when the browser renders the crappy HTML code, not all of the TRs have ids on them which means we cannot access them by their id. Sure, you could write some code that says "if he user selects 'Contract' then hide the first 3 TRs' but that relies on how the browser is interpreting the crappy HTML and is not going to be cross-browser compliant and even if you get it to work today, you can expect it to break within the next year as browsers evolve.

    If they can change the HTML to be well-formed, then here is a solution.
    HTML Code:
    <table>
    <tr id="Contract" style="display: none;">
    	<TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>NUMBER OF CONTRACTORS</B></FONT></TD>
    	<TD WIDTH=30>&nbsp;</TD>
    	<TD COLSPAN=2><cfINPUT TYPE=text NAME="c_numcontractors" VALUE="hidden" required="yes" message="Please fill No of Contractors for it."></TD>
    </tr> 
    <tr id="Direct_hire" style="display: none;">
    	<TD BGCOLOR="##99cc99" COLSPAN=3><FONT FACE="Arial, Helvetica, sans-serif" SIZE="1"><B>TARGET COMPENSATION</B></FONT></TD>
    	<TD WIDTH=30>&nbsp;</TD>
    	<TD COLSPAN=2><cfINPUT TYPE=text NAME="h_compensation" VALUE="#Form.h_compensation#" size=25 required="yes" message="Target Compensation field required"></TD>
    </tr>
    <table>
    <br/>
    <SELECT NAME="ptype" onchange="toggleSubmit(this);">
          <option value="Contract">Contract</option>
          <option value="Direct_hire">Direct Hire</option>
    </select>
    <script type='text/javascript'>
    function toggleSubmit(sel) {
    	if ( sel.options[sel.selectedIndex].value == "Contract" )  {
    		//user selected Contracts, so hide "Direct_hire" and show "Contracts"
    		document.getElementById('Direct_hire').style.display = 'none';
    		document.getElementById('Contract').style.display = 'block';
    	} else {
    		//user selected Direct_hire, so hide "Contracts" and show "Direct_hire" 
    		document.getElementById('Contract').style.display = 'none';
    		document.getElementById('Direct_hire').style.display = 'block';
    	}
    }
    document.getElementById('Contract').style.display = 'block';
    </script>

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    This is my guess as to what is needed to suit your needs:
    See: http://www.javascriptsource.com/form...down-list.html

    Very easy to change for information needed to be collected.

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles