Enabling and disabling form fields with JavaScript
Question
I am having trouble with getting the JavaScript to do what I need it to. I have a form with a country drop down list that has United States or Other; then I have a State field with a list of all 50 states in the US; then I have a text field for people to put what country they live in if they don't live in the United States. What I want to be able to do is if United Sates is selected in the country drop down list I want the "other" text field to be disabled and the state drop down list enabled; then vice versa, if they select other, then the state drop down list is disabled and the "other" text field is enabled.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="countryValidation.js"></script>
</head>
<body>
<div id="form2">
<form name="createForm" onsubmit="return createValidation();" method="get">
<p>Country: <select id="country">
<option value="0">United States</option>
<option value="1">Other</option>
</select> * </p>
<p>State: <select id="state">
<option value="0">- -Select state- -</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select> * </p>
<p>Please type in what country you live in:
<input type="text" id="countryOther" /> * </p>
And here is what I am trying to do with JavaScript:
function countryValidation ()
{
var country = document.forms["createForm"]["country"].value;
var countryOther = document.forms["createForm"]["countryOther"];
var state = document.forms["createForm"]["state"];
if (country == 0)
{
countryOther.createAttribute("disabled","disabled");
}
else if (country == 1)
{
state.createAttribute("disabled","disabled");
countryOther.removeAttribute("disabled");
}
}
I do have another JavaScript function that Validates the whole form, because it is a form that I will be using to allow people to create an account. I haven't gotten to the point of having an SQL server, nor have I learned SQL, PHP or ASP.net... I am doing this for a project and could really use some help with this problem.
Thanks!
2 answers
solution1
0 ACCPTED 2014-04-07 02:22:11
This does what you've asked. I have also added in a focus command, as it makes for a smoother ui. Once the user clicks Other, the focus goes automatically to the Other country textbox, letting them type.
http://jsfiddle.net/bhilleli/LsKDU/4/
function countryValidation()
{
var country = document.forms["createForm"]["country"].value;
var countryOther = document.forms["createForm"]["countryOther"];
var state = document.forms["createForm"]["state"];
if (country == 0)
{
state.disabled=false; //enable state
state.focus(); //focus state
countryOther.value=""; //clear countryOther from any prev entry
countryOther.disabled=true; //enable countryOther
}
else if (country == 1)
{
state.disabled=true; //disable state
state.value=0; //clear state from any prev value
countryOther.disabled=false; //enable countryOther
countryOther.focus(); //focus on countryOther
}
}
solution2
0 2014-04-07 02:35:10
Might I suggest a slightly different approach? Something like this, perhaps ...
<form name="createForm" onsubmit="return createValidation();" method="get">
<label for"country">Country</label>
<select id="country" name="country" onchange="countryValidation();">
<option value="0">Select Country</option>
<option value="1">United States</option>
<option value="2">Other</option>
</select>
<div id="moreInfo"></div>
</form>
<script type="text/javascript">
function countryValidation() {
var moreinfo = document.getElementById("moreInfo");
var country = document.getElementById("country").value;
if (country==1) {
var states = ["Alabama", "Alaska"];
var stateselect = '<select id="state" name="state">';
for (var i=0; i<states.length; i++) {
stateselect += '<option value="' + states[i] + '">' + states[i] + '</option>';
}
stateselect += '</select>';
moreinfo.innerHTML = stateselect;
} else if (country==2) {
moreinfo.innerHTML = '<input type="text" id="countryOther" name="countryOther" value="Please enter the name of your country" />';
}
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.