I'm trying to disable the "select" when "color1,color2 and color3" button is selected. And I wanted to enable it when the "color4" radio button was checked. I went to different resources and got confused how to put it in my codes.
here's my HTML:
<br> <input type="radio" id="color1" name="color" value="orange" onchange="display()" />
<br> <input type="radio" id="color2" name="color" value="white" onchange="display()" />
<br> <input type="radio" id="color3" name="color" value="red" onchange="display()" />
// when checked, the select must be enable
<br> <input type="radio" id="color4" name="color" value="other" onchange="display()" />
<select id="other_color" onchange="display()" />
<option value="black">black</option>
<option value="pink">pink</option>
<option value="green">Green</option> </select>
<div id="color_display" height="100px" width="100px"></div>
Now for my Js:
function display(){
if(document.getElementById('color1').checked){
document.getElementById('color_display').innerHTML = " Orange"; }
if(document.getElementById('color2').checked){
document.getElementById('color_display').innerHTML = " White"; }
if(document.getElementById('color3').checked){
document.getElementById('color_display').innerHTML = " Red"; }
if (document.getElementById('other_color').value == black') {
document.getElementById('color_display').innerHTML = " Black"; }
if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink"; }
if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";}
}
I haven't include the "color4" since it won't display anything, I want it to trigger to enable the selection.
Should I change or create another JS for checking? I'm not sure where to start.
From what I understood.
You can make the following changes in your JS code.
document.getElementById("other_color").disabled = true;//disabling the select tag initially;
function display() {
if (document.getElementById('color1').checked) {
document.getElementById('color_display').innerHTML = " Orange";
}
if (document.getElementById('color2').checked) {
document.getElementById('color_display').innerHTML = " White";
}
if (document.getElementById('color3').checked) {
document.getElementById('color_display').innerHTML = " Red";
}
if (document.getElementById('color4').checked) {
document.getElementById('other_color').disabled = false;//enable the select tag when the radio 4th radio gets checked
if (document.getElementById('other_color').value == 'black') {
document.getElementById('color_display').innerHTML = " Black";
}
if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink";
}
if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";
}
}
}
please change your js like that.
function display() {
if (document.getElementById('color4').checked) {
document.getElementById("other_color").disabled = true;
}
else{
document.getElementById("other_color").disabled = false;
}
}
Based on your post and the information I deduce from your comment on your initial post and answers, I thing you are trying to achieve what I've replicated in the spinet below:
Instead of showing the select option by default, hide it so as to only show it when the color4 radio button is select so as to make it more user friendly for an improved User Experience.
var color = document.querySelectorAll('input[name="color"]'),
displaySelectedColour = document.getElementById("color_display"),
selectOption = document.getElementById("other_color");
for (var i in color) {
color[i].onclick = function() {
if (document.getElementById('color1').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "Orange";
selectOption.style.display = "none";
}
if (document.getElementById('color2').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "White";
selectOption.style.display = "none";
}
if (document.getElementById('color3').checked == true) {
displaySelectedColour.style.display = "block";
displaySelectedColour.innerText = "Red";
selectOption.style.display = "none";
}
if (document.getElementById('color4').checked == true) {
displaySelectedColour.style.display = "none";
selectOption.style.display = "block";
}
};
}
<input type="radio" id="color1" name="color" value="orange">
<br><input type="radio" id="color2" name="color" value="white">
<br><input type="radio" id="color3" name="color" value="red">
<br><input type="radio" id="color4" name="color" value="other">
<!-- Select disabled by default and enabled only on color4 radio button check -->
<br>
<select id="other_color" style="display: none;">
<option disabled selected value>-- Select one --</option>
<option>black</option>
<option>pink</option>
<option>green</option>
</select>
<div id="color_display" height="100px" width="100px"></div>
Related
Im partly there but it would be helpful if any of you guys could send the entire code .
1) Create a form with the below given fields and validate the same using javascript or jquery.
Name : Text box- mandatory
Gender : Radio Button
Age : Text box - Accept Number only - (check for valid Age criteria)
Email : Text box - should be in format example#gmail.com
Website : Text box - should be in format http://www.example.com
Country : Select box with 10 countries
Mobile : Text box - should be a 10 digit number - Display this field only after the user selects a country
Social Media Accounts : Facebook, Google, Twitter (3 checkboxes) - Display Social media section only if selected Country is India
I agree the Terms and Conditions - Checkbox
All fields are mandatory and show error messages for all fields(if not valid)
Only allow to submit form after checking the 'I agree' checkbox.
<!DOCTYPE html>
<html>
<head>
<title>Get Values Of Form Elements Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="form_value.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="form_value.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#social").hide() ;
// $("#hide").click(function(){
// $("social").hide();
// });
// var country = document.getElementByName("country")[0].value;
// if (country.value == "India") {
// $("#show").click(function(){
// $("social").show();
// });
// }
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.email_id.value)) {
alert("You have entered an invalid email address!")
return (false)
}
});
</script>
</head>
<body onload="disableSubmit()">
<div class="container">
<div class="main">
<h2>Get Values Of Form Elements Using jQuery</h2>
<form action="">
<!-- Text -->
<br>
<br>
<label>Name :</label>
<input type="text" id="text" name="name" value=""required/><br>
<!-- Radio Button -->
<br><br><br>
<label>Gender:</label>
<input type="radio" name="male" value="Male">Male
<input type="radio" name="female" value="Female">Female
<br><br>
<!-- Textarea -->
<label>Email :</label>
<input type="text" id="Email" value="" id="Email"/>
<br>
<br><br>
Age: <input type="text" id="Age" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
<br><br>
<label> Website:</label>
<input type="text" id="text" value="" name = "Website" id="website" />
<script type="text/javascript">
function validate() {
if(Website.value.length==0)
{
document.getElementById("Website").innerHTML="Should be in the format http://www.example.com ";
}
}
</script>
<br><br>
<label>Country:</label>
<select class="country" id = "country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
<option value="uae">United Arab Emirates</option>
<option value="germany">Germany</option>
<option value="france">France</option>
<option value="netherlands">Netherlands</option>
<option value="yemen">Yemen</option>
<option value="pakistan">Pakistan</option>
<option value="russia">Russia</option>
</select>
<br><br>
<label>Mobile:</label>
<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">
<script type="text/javascript">
function phoneno(){
$('#phone').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
}
</script>
<br><br>
<div id = "social" >
<p>Social Media Accounts.</p> <input type="checkbox" id="Facebook" value="Facebook"><label for="Facebook"> Facebook</label><br> <input type="checkbox" id="Google" value="Google"><label for="Google"> CSS</label><br> <input type="checkbox" id="Twitter" value="Twitter"><label for="Twitter"> Twitter</label><br>
</div>
<br>
<br>
<script>
function disableSubmit() {
document.getElementById("submit").disabled = true;
}
function activateButton(element) {
if(element.checked) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
</script>
<input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"> I Agree Terms & Coditions
<br><br>
<input type="submit" name="submit" id="submit">
</script>
</form>
</div>
</body>
</html>
this is my js page content form_value.js
$(document).ready(function() {
// Function to get input value.
$('#text_value').click(function() {
var text_value = $("#text").val();
if(text_value=='') {
alert("Enter Some Text In Input Field");
}else{
alert(text_value);
}
});
// Funtion to get checked radio's value.
$('#gender_value').click(function() {
$('#result').empty();
var value = $("form input[type='gender']:checked").val();
if($("form input[type='gender']").is(':checked')) {
$('#result').append("Checked Radio Button Value is :<span> "+ value +" </span>");
}else{
alert(" Please Select any Option ");
}
});
// Get value Onchange radio function.
$('input:gender').change(function(){
var value = $("form input[type='gender']:checked").val();
alert("Value of Changed Radio is : " +value);
});
// Funtion to reset or clear selection.
$('#radio_reset').click(function() {
$('#result').empty();
$("input:radio").attr("checked", false);
});
$('#Email').click(function() {
function validate(Email) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za- z]{2,4})$/;
//var address = document.getElementById[email].value;
if (reg.test(email) == false)
{
alert('Should be in the format example#gmail.com');
return (false);
}
}
});
});
$("#Age").click(function() {
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
});
</script>
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var name = document.forms["myForm"]["fname"].value;
var gender = document.forms["myForm"]["gender"].value;
var age = document.forms["myForm"]["age"].value;
var a = parseInt(age);
var email = document.forms["myForm"]["email"].value;
var url = document.forms["myForm"]["website"].value;
var country = document.forms["myForm"]["country"].value;
var mobileCountry = document.forms["myForm"]["mobileCountry"].value;
var mcLength = mobileCountry.length;
if (name == "") {
alert("Name Field is mandatory");
return false;
}
if (gender != "male" && gender != "female") {
alert("Atleast one Gender has to be chosen");
return false;
}
if(isNaN(a)){
alert("Age is compulsory and must be a number");
return false;
}
if(email == ""){
alert("Email address is required");
}
else if(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
} else{
alert("Email address entered is invalid");
return false;
}
if(/^(ftp|http|https):\/\/[^ "]+$/.test(url)){
} else{
alert("Website url entered is invalid");
return false;
}
if(country != "choose"){
document.getElementById("mc").style.display = "block";
} else{
document.getElementById("mc").style.display = "none";
}
if(mcLength != 10){
alert("Number must be ten digits");
return false;
}
} function displaySocial(){ var social =
document.getElementById("social");
var mc = document.getElementById("mobileCountry");
var country = document.getElementById("country");
var selectedValue = country.options[country.selectedIndex].value;
if (selectedValue != "choose") {
if(selectedValue == "india"){
if(social.style.display = "none"){
social.style.display = "block";
} else{
social.style.display = "none";
} } else{
social.style.display = "none"; }
if(mc.style.display = "none"){
mc.style.display = "block";
} else{
mc.style.display = "none"; } } else{
mc.style.display = "none"; }
} </script> </head> <body> <form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" value="female" name="gender"> Female <br> age: <input type="text" name="age"><br> email: <input type="text" name="email"><br> website: <input type="text" name="website"><br> country: <select type="text" name="country" id="country" onclick="displaySocial()"><option value="choose">--choose--</option><option value="usa">USA</option><option value="uk">UK</option><option value="ng">Nigeria</option><option value="india">India</option></select><br> <span id="mobileCountry" style="display: none;">mobile country: <input type="text" name="mobileCountry"><br></span> <span id="social" style="display: none;">Social Media: <input type="radio" name="gender"> Facebook <input type="radio" name="gender"> Google <input type="radio" name="gender"> Twitter</span> <br> <p> <input type="submit" value="Submit"> </form> <p id="error"></p> </body> </html>
When a option is selected in drop down it shows data from mysql and I need it to be selectable. So I made a radio button but I need it to appear after option is selected but instead it is always there.
Let your radiobuttons div have the id of "radio_div" and your select - "select_options", then:
document.getElementById('select_options').addEventListener('change', function () {
document.getElementById('radio_div').style.display = 'block';
});
Not sure if I understand, but something like this?
http://jsfiddle.net/zysrcndx/
HTML:
<select id="show">
<option value="no" selected="selected">not showing</option>
<option value="yes">showing</option>
</select>
<div id="radio" style="display: none;">
<input type="radio" name="radio" value="something">Something<br>
<input type="radio" name="radio" value="somethingelse">Something Else
</div>
JavaScript:
var dd = document.getElementById('show');
var r = document.getElementById('radio');
dd.addEventListener('change', function () {
if(dd.options[dd.selectedIndex].value == 'no') {
r.style.display = 'none';
} else {
r.style.display = 'block';
}
});
I am making a form with some fields that a user has to fill out. Once he/she fills it out, hits save, the form disappears and a new div appears with what the user filled out. Unfortunately, I cannot get the data to show in this second div that appears. I am not sure what I'm doing wrong, maybe you can help me? Also, I need to use pure Javascript, not jQuery or anything else.
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button id="edit" value="Edit" onclick="editData();"></button>
<p id="pname"></p>
</div>
<body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
try this one I think it is working
try the below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
function showData() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
" First Name : " + firstName + "<hr>",
" Last Name : " + lastName + "<hr>",
" state : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
Problem: you didn't target DOM objects, you have targeted their values, and later in code you try to get properties, like: firstName.name!
Change two lines at the top of your code to this, and everything should work fine.
One error is the fact that you are getting the values from the elements right after the page is rendered, thus they are all undefined.
You should get them after the save button is pressed. Moving the variable declarations inside the showData function will help that.
Also in your variables you are saving the element.value, thus saving the string entered by the user.
Later when creating the text you are trying to insert as HTML you access the value and name properties. That means you are trying to use element.value.value and element.value.name which undefined for strings.
Removing the value property in your variable declaration will give you the element, and later you can just get the value and name properties out of it.
I have three radio buttons that calculate fees. When you click the first radio button it has a drop down with a checkbox if you click the checkbox it adds $3.. if the user realizes that was a mistake and does not unclick the check box and clicks another radio button it does not remove the $3 from the total until the radio buttons are clicked at least twice.
The first two radio buttons are 78.25 and the 3rd is 88.25. Click first radio button 78.25 and then the checkbox will make it 81.25, then pretend your the user change your mind and hit the second radio button it should change it back to 78.25 when you click. But it does not and it keeps 81.25 if you click the third radio button it finally realizes it and corrects itself?
I have it set up to uncheck the checkbox when another radio button is checked but for some reason the fee is not changing instantly and is delayed for some reason. Can some one please assist?
If anyone has any suggestions or advice it would be greatly appreciated!
http://jsfiddle.net/Ln1fnstb/2/
$(function(){ //added by me
$('#brandnewrv').click(function(){
calculateTotal();
});
});
function rvsPrice()
{
var rvPrice=0;
var theForm = document.forms["form"];
var brandnewRv = document.getElementById('brandnewrv');
if(brandnewRv.checked==true)
{
rvPrice=3;
}
return rvPrice;
}
//Setting Proof of Ownership Prices
//Set up an associative array
var title_prices = new Array();
title_prices["MCO"]=78.25;
title_prices["FL Title"]=78.25;
title_prices["OOS Title"]=88.25;
// Proof of Ownership Radio Buttons
function getProofOfOwnership()
{
var proofOfOwnership=0;
//Get a reference to the form id="form"
var theForm = document.forms["form"];
//Get a reference to the title the user Chooses name=ownerShip":
var ownerShip = theForm.elements["ownership"];
//Here since there are 4 radio buttons ownerShip.length = 4
//We loop through each radio buttons
for(var i = 0; i < ownerShip.length; i++)
{
//if the radio button is checked
if(ownerShip[i].checked)
{
proofOfOwnership = title_prices[ownerShip[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the proofOfOwnership
return proofOfOwnership;
}
function calculateTotal()
{
var titleFees = rvsPrice() + getProofOfOwnership();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
<label><strong>Proof of Ownership</strong></label><br />
<label class='radiolabel'><input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Manufacturer's Statement of Origin </label>
<label class='radiolabel'><input type="radio" name="ownership" value="FL Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Florida Certificate of Title </label>
<label class='radiolabel'><input type="radio" name="ownership" value="OOS Title" onclick="calculateTotal()" onchange="statedropDown(this.value);"/>Out-of-state Certificate of Title </label>
<div id="div3" style="display:none">
<div class="clearfix">
<select name="month1" id="month1" size="1">
<option value="">Choose a Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
</div>
<div id="div4" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<div id="div5" style="display:none">
<p><label for='brandnewrv' class="inlinelabel"> Check if Brand new RV/Motor Home</label>
<input type="checkbox" id="brandnewrv" name='brandnewrv' onclick="calculateTotal()" /></p>
</div>
<div id="totalPrice"></div>
<script type="text/javascript">
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
rvsPrice();
}
else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("titlestates").selectedIndex = 0;
}
}
</script>
</form>
I think there's some more complexity than there needs to be. I think the radio buttons really just need a "click" handler that calls a modified version of the "statedropDown" function, and no "change" handler. The "statedropDown" function should be changed so that it calls "calculateTotal()" at the end. And that line that references "titlestates" needs to be commented out in the fiddle, since that part of the DOM isn't there.
<label class='radiolabel'>
<input type="radio" name="ownership" required="yes" message="Please select proof of ownership." value="MCO" onclick="statedropDown(this.value)">Manufacturer's Statement of Origin </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="FL Title" onclick="statedropDown(this.value)">Florida Certificate of Title </label>
<label class='radiolabel'>
<input type="radio" name="ownership" value="OOS Title" onclick="statedropDown(this.value)">Out-of-state Certificate of Title </label>
and then
function statedropDown(ownership) {
if (ownership == "OOS Title") {
document.getElementById("div3").style.display = 'block';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "FL Title") {
document.getElementById("div4").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div5").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
document.getElementById("brandnewrv").checked = false;
} else if (ownership == "MCO") {
document.getElementById("div5").style.display = 'block';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
//document.getElementById("titlestates").selectedIndex = 0;
}
calculateTotal();
}
Here is the updated fiddle. (I changed a couple of other minor things while tinkering with it, but I think the above changes are the key.)
I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.
This is what I have so far:
<html>
<head>
<title>combo</title>
<script language="javascript">
function ToggleDisplay(Section, boolHide) {
if (boolHide == true) {
Section.style.display = "none";
}
else {
Section.style.display = "";
}
}
function disableElement(element, boolHide)
{
var input =
document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled",boolHide);
}
}
function hideShowElement(CurrentSection, OtherSection, DisableSection)
{
var sectionVal = CurrentSection.value;
if (sectionVal == 0) {
ToggleDisplay(OtherSection, true);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "true");
}
else {
ToggleDisplay(OtherSection, false);
//disableGroup (this.form, 'Radio1' , true);
disableElement(DisableSection, "false");
}
}
</script>
</head>
<body>
<form name="testForm" action="" method="post">
Show Hidden Text? <select name="cmbYN"
onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
<option value="0" selected="selected"></option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<div id="MyDIV" style="display: none">
My Hidden Text: <input name="Text1" type="text" />
<br>
</div>
<fieldset id="OptionGrp1" name="Group1">
Option Group<br><br>
Option 1<input name="Radio1" type="radio" checked>
Option 2<input name="Radio1" type="radio">
</fieldset>
</form>
</body>
</html>
This is hiding the input box and disabling the fieldset, but not re-enabling them.
You should change the display back to what it was before, normally block.
if (boolHide){
Section.style.display = "none";
}else {
Section.style.display = "block";
}
Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:
for(var i = 0; i < input.length; i++)
{
if(boolHide){
input[i].setAttribute("disabled", "disabled");
}else{
input[i].removeAttribute("disabled");
}
}