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 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>
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..
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.
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
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.
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> </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> </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>
show/hide using select box
Reply With Quote
Bookmarks