I used a radio button to display the dropdown list with three options. I need to display a textbox when the user selects the blank option. If anyone has a suggestion that would steer me in the right direction, I would be grateful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="">
<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div5" />
</div>
<div id="div5" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers" onchange="if(this.selected index==blank){this.form['box'].style.visibility='visible'}else{this.form['box'].style.visibility='hidden'};">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
} }
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</form>
</body>
</html>
<select name="selWaiver" id="waivers" onchange='if ($(this).val()=="") {
$("#box").show(); }else{
$("#box").hide();}'>
I recommend JQuery because it will save you a lot of cross browser compatibility issues!
Are you using jQuery in this project. It is so much easier to perform DOM manipulation using the jQuery library. I would use the jQuery toggle() method for this (more info at http://api.jquery.com/css). You could do something like this on the click event for the blank option:
$('.hide').toggle();
Javascript version (untested) :
<select name="selWaiver" id="waivers" onchange='check(this);'>
<script>
function check(sel)
{
var value=frm1.selWaiver.options[frm1.selWaiver.options.selectedIndex].value;
//alert(value) to see if it works
var box=document.getElementById("box");
if (value=="")
box.style.display="block";
else
box.style.display="none";
}
</script>
Related
I know its a simple but i tried many solutions but i failed. I have a form on which I use <select> tag in <option> i use two values coo and uh i want that when user select uh then it display an extra input type field.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#s_designation').on('change',function(){
if ($(this).val() === "uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
I just tested your code and it works fine:
Link:https://jsfiddle.net/g95pyqw6/
Edit: But that could be because of JSfiddle.
Try to uncomment the first line of Javascript, that should help! :-)
I hope I could help you out. If you need more help, feel free to write a comment :-)
You jQuery code is executing before the document loads, which means the select element is not visible to jQuery, and jQuery won't throws error if it didn't find any given element.
use the $(document).ready like the following, it will load your code after document loads:
<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
});
</script>
-------
</head>
if you want to execute jQuery code after page loading
you simply place your jQuery code before </body> tag like the following:
<body>
-------
-------
<script>
$('#s_designation').on('change',function(){
if( $(this).val()==="uh") {
$("#uh").show()
}
else {
$("#uh").hide()
}
});
</script>
</body>
here your Working code (checked on my local machine) answer is here for your problem Jquery not working from Google CND
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#s_designation').on('change',function(){
if( $(this).val()=="uh"){
$("#uh").show()
}
else{
$("#uh").hide()
}
});});
</script>
<title>Untitled Document</title>
</head>
<body>
<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>
</body>
</html>
In your code you have commented the $(function() line :
You are also missing the required jquery library files
Please add this to your html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Fiddle: http://jsfiddle.net/0mqze5ny/
$(function () {
$('#s_designation').on('change', function () {
if ($(this).val() === "uh") {
$("#uh").show()
} else {
$("#uh").hide()
}
});
})
I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. My code is this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.
Instead of tracking clicks on the option level, track a change on the select level.
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this ..
Help I'm very new with web developing using ASP.NET. Why is the my web app does not give the desired output like IE does when debugging my code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h1{color:Blue}
h2{color:Red}
</style>
<script type="text/javascript">
function ShowColor() {
alert("You selected " + SelectColor.value);
BodyContent.style.backgroundColor = SelectColor.value;
}
</script>
</head>
<body>
<div id="BodyContent">
<h1>HelloWorld</h1>
<h2>Welcome</h2>
<p>
This is my first Web Page</p>
<hr />
Please select color:
<select id="SelectColor">
<option value="white">white</option>
<option value="yellow">yellow</option>
<option value="silver">silver</option>
</select>
<input id="ButtonColor" type="button" value="Select" onclick="ShowColor()" />
</div>
</body>
</html>
Problem is that FF does not executes the javascript "ShowColor" when i clicked the Select button but IE does.
function ShowColor() {
alert("You selected " + SelectColor.value);
BodyContent.style.backgroundColor = SelectColor.value;
}
Your javascript function should be as follows:
function ShowColor() {
alert("You selected " + document.getElementById("SelectColor").value);
document.body.style.backgroundColor = document.getElementById("SelectColor").value;
}
You need to select the actual elements by using javascript. For example document.gelElementById("id of element"), and then change the documents color. This should work in any browser.
The function now shows the appropriate selected value and actually changes the background of the webpage. Mark as answer if this helped you out.
try this:
<script type="text/javascript">
var selected;
function alertselected(selectobj) {
selected = selectobj.selectedIndex;
}
function ShowColor() {
alert("You selected " + selected);
elm = document.getElementById("sample");
document.getElementById("BodyContent").style.backgroundColor = elm.options[elm.selectedIndex].value;
}
html:
<div id="BodyContent"><select id="sample" onChange="alertselected(this)">option>white</option><option>yellow</option><option>silver</option>
<input id="ButtonColor" type="button" value="Select" onclick="ShowColor()" /></div>
I need checkBox 3 to disable checkBox 1 & 2 when it is selected.
The code works when I have the onClick in the 3rd checkbox tag, but my lead programmer wants the onClick in the JavaScript code above. I'm not that good with JS so I don't know exactly why it's not working. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var field = document.getElementById("check_1157");
if (field)
{
function update1157Box(contactMethod)
{
var contactMethod = document.getElementById("check_1157");
if(contactMethod.check_1157.checked)
{
//enable the not to receive information
contactMethod.check_1156.disabled =true;
contactMethod.check_1156.checked = false;
contactMethod.check_1158.disabled =true;
contactMethod.check_1158.checked = false;
return;
}
}
field.onClick = update1157Box(this.form)
//the not to receive information
contactMethod.check_1156.checked = false;
contactMethod.check_1156.disabled = false;
contactMethod.check_1158.checked = false;
contactMethod.check_1158.disabled = false;
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery makes event handlers a piece of cake:
$('#check_1157').click(function() {
if ($(this).prop('checked')) {
$('#check_1156, #check_1158').prop({
checked: false,
disabled: true
});
} else {
$('#check_1156, #check_1158').prop({disabled: false});
}
});
My approach apposed to Fabian's, I would do some thing like this, as you have a div around around those block of three checkboxs called many-from-many this will look for the (parent <lable>) nodes (parent <DIV>) of the third check box and then find the childNodes (checkboxs)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div>
</form>
.
function togTopTwo(c){
var mm = c.parentNode.parentNode;
var xx = mm.firstChild.firstChild;
var secondOfMany = xx.parentNode.nextSibling.firstChild;
if(c.checked){
xx.disabled=true;
secondOfMany.disabled = true;
}else{
xx.disabled=false;
secondOfMany.disabled =false;
}
}
As Eric's solution is using jQuery, here is a pure JavaScript alternative:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var toggle_list = ['check_1156', 'check_1158'];
function toggle(checkbox) {
if (checkbox.disabled) {
checkbox.removeAttribute('disabled');
} else {
checkbox.setAttribute('disabled', true);
}
}
function toggleActivation() {
for (var i=0; i<toggle_list.length; i++) {
var id = toggle_list[i];
var checkbox = document.getElementById(id);
toggle(checkbox);
}
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
This might not be IE safe as I am currently running Linux. If it doesn't work in IE, the problem will be inside the toggle function.
I have read the answers for the question window.onload vs <body onload=""/>. In that Q&A, many claim that window.onload and body.onload are identical. This is not what I experience.
Consider the two test pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 1</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
</script>
</head>
<body onload="resetMenu();" onunload="resetMenu();">
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p>google
</p>
</body>
</html>
And:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 2</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
window.onload = resetMenu();
window.onunload = resetMenu();
</script>
</head>
<body>
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p>google
</p>
</body>
</html>
With the "test 1" page, if you select an item from the drop down menu and the click the link to navigate away from the page and then hit the back button the menu will be reset to its initial state. This doesn't happen for the "test 2" page though. Why?
While this is a test, my goal is to do something similar on an aspx page using RegisterStartupScript or RegisterClientScriptBlock so I want to be able to recreate the behaviour of "test 1" without using the body onload/onunload but using window.onload/onunload.
Crescent is correct, by using:
window.onload = resetMenu();
You are making window.onload equal to the return value of the resetMenu function, rather than providing the function which should be called onload (and unload). So you should use:
window.onload = resetMenu;
window.onunload = resetMenu;
But why do you need to reset the menu when the page is unloaded?
Note: You can also use anonymous functions as the onload handler :)