show/hide using select box

@cfml2Jan 11.2008

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:

[code=html]<SELECT NAME=”ptype” onchange=”toggleSubmit(this);”> <option value=”Contract”>Contract</option> <option value=”Direct_hire”>Direct Hire</option> </select>[/code]

now the javascript i am using:

HTML Code:

[code=html]<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>[/code]

now te which which gets egffected..

[code=html]<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> </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> </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>[/code]

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

to post a comment

JavaScript

8 Comments(s) _↴

@cgishackJan 11.2008 — #Here are 2 small functions you can use to show and hide any html element.

<i>
 </i>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

<i>
 </i>&lt;div id="myElementID"&gt; Hello World &lt;/div&gt;
 &lt;a href="#" onclick="hideEl('myElementID')" &gt; CLick to Hide &lt;/a&gt;
 &lt;a href="#" onclick="showEl('myElementID')" &gt; CLick to Show&lt;/a&gt;

Hope this helps you out.

Drew

@cfml2authorJan 12.2008 — #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> </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..

@cgishackJan 12.2008 — #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

@cfml2authorJan 15.2008 — #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

@Mr_JJan 15.2008 — #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>
 [/CODE]

@AmateurKazJul 26.2012 — #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.

@nap0leonJul 26.2012 — #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.

[code=html]
 <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>
 [/code]

@JMRKERJul 26.2012 — #This is my guess as to what is needed to suit your needs:

See: http://www.javascriptsource.com/forms/multi-value-drop-down-list.html

Very easy to change for information needed to be collected.

Good Luck!

?

Also in #JavaScript _↴

contenteditable Logic problem (I think)Remove/modify certain th and td

Success!

Help @cfml2 spread the word by sharing this article on Twitter...

Tweet This

show/hide using select box

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

show/hide using select box

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴