Develop Reference

Use JavaScript to disable fields in a HTML form

I have two fields in a HTML form:
<input type="text" name="name1"/>
<input type="text" name="name2"/>
Is there a way using JavaScript that if the user user has entered text into the first test box, the second textbox is disabled and vice-versa?

You could do it with jQuery by disabling the input that wasn't being typed in using the keyup() event in conjunction with the not() method. That would look like this:
$(function() {
var textLength;
$('input').keyup(function() {
textLength = $(this).val().length;
if (textLength > 0) {
$('input').not(this).attr('disabled','disabled');
} else {
$('input').removeAttr('disabled');
}
});
});
input[type="text"]:disabled {
background: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1"/>
<input type="text" name="name2"/>

Here is an very simple example(jsfiddle link below):
<input type="text" name="name1" id="name1" placeholder="Name 1"/>
<input type="text" name="name2"id="name2" placeholder="Name 2"/>
var name1 = document.getElementById('name1'),
name2 =document.getElementById('name2');
name1.onkeyup = function(e) {
if (name1.value.length > 0) {
name2.setAttribute('disabled', 'disabled');
} else {
name2.removeAttribute('disabled');
}
}
name2.onkeyup = function(e) {
if (name2.value.length > 0) {
name1.setAttribute('disabled', 'disabled');
} else {
name1.removeAttribute('disabled');
}
}
https://jsfiddle.net/Neviton/81zzjabk/

jQuery way:
At first you have to create CSS class 'disabled'.
<style>
.disabled {
opacity: 0.5;
pointer-events: none;
}
</style>
Then you add event listener 'change' to your inputs.
$( "input[value='name1']" ).change(function() {
$("input[value='name2']" ).addClass('disabled');
});
and
$( "input[value='name2']" ).change(function() {
$("input[value='name1']" ).addClass('disabled');
});
That will do the trick. When user changes value of input it adds class 'disabled' to another input.

This is an answer in clear JavaScript. The advantage of using the disabled property is, that even with tabulating it is not possible to put an input into the other field.
In the snippet the disabling is also reset if both input fields are empty.
var in1 = document.getElementById("input1"),
in2 = document.getElementById("input2");
function doOnChange() {
if (in1.value != "") {
in1.disabled = false;
in2.disabled = true;
} else if (in2.value != "") {
in1.disabled = true;
in2.disabled = false;
} if (in1.value == "" && in2.value == "") {
in1.disabled = false;
in2.disabled = false;
}
}
in1.addEventListener("keyup", doOnChange);
in2.addEventListener("keyup", doOnChange);
<input id="input1" />
<input id="input2" />

function myFunction() {
var a = document.getElementById('input1');
var b = document.getElementById('input2');
if (a.value.length == 0 && b.value.length == 0) {
a.disabled = false;
b.disabled = false;
} else if (a.value.length == 0) {
a.disabled = true;
} else if (b.value.length == 0) {
b.disabled = true;
}
}
<input type="text" id="input1" onkeyup="myFunction()" />
<input type="text" id="input2" onkeyup="myFunction()" />

How do i make the field that shows required in html5 and java script? Below is my code

if you look at the code below I use javascript to show fields when another radio button is clicked. Is there way using html5 and javascript to make those fields that show required.
function yesnoCheckcanwork() {
if (document.getElementById('no_to_work').checked) {
document.getElementById('notoworkexplain').style.display = 'block';
}
else
document.getElementById('notoworkexplain').style.display = 'none';
}
function yesnoCheckcanfelony() {
if (document.getElementById('yes_to_felony').checked) {
document.getElementById('yestofelonyexplain').style.display = 'block';
}
else
document.getElementById('yestofelonyexplain').style.display = 'none';
}
<label>Are you a U.S. citizen or otherwise authorized to work in the U.S. on an unrestricted basis?:</label>
<input type="radio" id="yes_to_work" value="yes_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required"><label for="yes_to_work" class="light">Yes</label>
<input type="radio" id="no_to_work" value="no_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required"><label for="no_to_work" class="light">No</label>
<div id="notoworkexplain" style="display:none">
<label for="no_to_work_explain">Please explain:</label><textarea id="no_to_work_explain" name="no_to_work_explain"></textarea>
</div>
<label>Have you ever been convicted of a felony?:</label>
<input type="radio" id="yes_to_felony" value="yes_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required"><label for="yes_to_felony" class="light">Yes</label>
<input type="radio" id="no_to_felony" value="no_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required""<label for="no_to_felony" class="light">No</label>
<div id="yestofelonyexplain" style="display:none">
<label for="yes_to_felony_explain">Please provide date of conviction and fully describe the circumstances:</label><textarea id="yes_to_felony_explain" name="yes_to_felony_explain" ></textarea>
</div>

All you need to do is to set the element's required attribute to true or false.
So try this:
function yesnoCheckcanwork() {
if (document.getElementById('no_to_work').checked) {
document.getElementById('notoworkexplain').style.display = 'block';
document.getElementById('no_to_work_explain').required = true;
} else {
document.getElementById('notoworkexplain').style.display = 'none';
document.getElementById('no_to_work_explain').required = false;
}
}
function yesnoCheckcanfelony() {
if (document.getElementById('yes_to_felony').checked) {
document.getElementById('yestofelonyexplain').style.display = 'block';
document.getElementById('yes_to_felony_explain').required = true;
} else {
document.getElementById('yestofelonyexplain').style.display = 'none';
document.getElementById('yes_to_felony_explain').required = false;
}
}
Here is a demo: http://jsfiddle.net/dbhz2nj9/

Disable an input field if second input (most current) field is filled

I'm very new to javascript. I read this link and tried to customize it but it is not working: Disable an input field if second input field is filled
I want to allow people to toggle between two options-city and zipcode. I want to enable whatever field they chose last and disable the other. For example, if they are on the zipcode tab and press the submit button, whatever input it is in the zipcode gets submitted and not the city & vice versa.
The html is:
<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
maxlength="255" name="aw_zipcode" value="" /></div>
The script is:
var dis1 = document.getElementById("city");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("zipcode").disabled = true;
}
}
var dis2 = document.getElementById("zipcode");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("city").disabled = true;
}
}
Any help is very much appreciated! The website is http://austinhometeam.staging.wpengine.com/joyce-newsletter/

Like I told you in the comment, you need to change the ID in the "getElementById".
I also add the re-enabled the field when the other one is empty.
I add an empty value in the select, when the null is selected, the zip code's field return enable.
HTML
<ul class="tabs">
<li><a class="border-radius top med" href="#city">City</a></li>
<li><a class="border-radius top med" href="#zipcode">Zipcode</a></li>
</ul>
<div id="city"><label class="IDX-advancedText">City</label>
<select id="aht-home-city" name="city[]" class="IDX-select " autocomplete="off">
<option value=""></option>
<option value="2115">Austin</option>
<option value="2718">Bartlett</option>
</select>
</div>
<div id="zipcode"><label class="IDX-advancedText">Zipcode</label>
<input class="IDX-advancedBox IDX-advWildText" id="IDX-aw_zipcode" type="text"
maxlength="255" name="aw_zipcode" value="" /></div>
Javascript :
var dis1 = document.getElementById("aht-home-city");
var dis2 = document.getElementById("IDX-aw_zipcode");
dis1.onchange = function () {
if (dis1.value !== "" || dis1.value.length > 0) {
dis2.disabled = true;
} else {
dis2.disabled = false;
}
};
dis2.onchange = function () {
if (dis2.value !== "" || dis2.value.length > 0) {
dis1.disabled = true;
} else {
dis1.disabled = false;
}
};
There is a working example :
JSBin Example

Looking for something like this behaviour?
var last = "";
var dis1 = document.getElementById("aht-home-city");
dis1.onchange = function () {
last = "city";
document.getElementById("IDX-aw_zipcode").disabled = true;
}
var dis2 = document.getElementById("IDX-aw_zipcode");
dis2.onchange = function () {
last = "zipcode";
if (this.value != "" || this.value.length > 0) {
document.getElementById("aht-home-city").disabled = true;
}
}
Check this jsFiddle
Note: there was also a missing </select> tag in the HTML.

how to generate error message in form if any of the fields left blank

<form onsubmit="chkform()">
<table>
<tr><td>name</td><td><input type="text" id="uname"/></td></tr>
<tr><td></td><td><div id="er1"></div></td></tr>
<tr><td>address</td><td><input type="text" id="add"/></td></tr>
<tr><td></td><td><div id="er2"></div></td></tr>
</table>
</form>
<script>
function chkform()
{
if (document.getElementById("uname").value === "" )
{
document.getElementById("er1").innerHTML = "name cant be left blank";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
</script>
i want to show error message in div, if any of the fields are left blank and this message should disappear when text box is clicked.

Try adding both input boxes to an array, and looping through them to test whether they have values entered or not.
I've edited your code.
function chkform()
{
var inputs = [];
inputs[0] = document.getElementById("uname");
inputs[1] = document.getElementById("add");
for( i =0; i < inputs.length; i++) {
if (inputs[i].value === "" )
{
document.getElementById("er1").innerHTML = "Please fill out all form inputs!";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
}

Using the following will always allow you to add inputs without re-writing your validation function:
function chkform()
{
var form = document.getElementsByTagName('form')[0];
var inputs = form.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].value === '')
// do your error
}
}
Working fiddle

You should add else part to your if condition, that will take care of removing the error message when thge field has been filled.
else {
document.getElementById("er1").innerHTML = "";
document.getElementById("er1").style.display = "none";
}
http://codepen.io/anon/pen/gxJid

I guess you need return to
<form onsubmit="return chkform()">
and
return false in your red alert message block
that works.
i.e.
<form onsubmit="return chkform()">
function chkform() {
if (document.getElementById("uname").value === "") {
. . .
return false;
}
if (document.getElementById("car").value == "truck") {
. . .
return false;
}
. . .
}

<form onsubmit="return false">
<table>
<tr><td>name</td><td><input type="text" id="uname"/></td></tr>
<tr><td></td><td><div id="er1"></div></td></tr>
<tr><td>address</td><td><input type="text" id="add"/></td></tr>
<tr><td></td><td><div id="er2"></div></td></tr>
</table>
<input type="submit" onclick="chkform()"/>
</form>
<script>
function chkform()
{
if (document.getElementById("uname").value === "" )
{
document.getElementById("er1").innerHTML = "name cant be left blank";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
</script>

Checkbox to display more options

I am using ColdFusion 8 to create a search form and would like the user to be able to check a box if they want the advanced search options to appear.
Here is what I have so far:
In my javascript file:
function showDiv(advancedVal)
{
if(advancedVal == '') {
$('moreOptions').style.display = "";
} else {
$('moreOptions').style.display = "none";
}
}
In my CF file:
<input name="advanced" type="checkbox" value="" id="advanced" onclick="showDiv('');">
<div id="moreOptions" style="display:none;" class="moreOptions">
<table>
drop down boxes
</table>
</div>
The checkbox is in a different table, does this matter?
Anyone know why this isn't working?

Are you using jQuery? Then it should be:
$('moreOptions').style.display = "" should be $('#moreOptions').show()
or
$('moreOptions')[0].style.display = ""
UPD
I guess this is what you want:
function showDiv(obj) {
var more = document.getElementById('moreOptions');
more.style.display = obj.checked ? "" : "none";
}​
And change your markup:
<input name="advanced" type="checkbox" value="" id="advanced" onchange="showDiv(this)">
See demo http://jsfiddle.net/dfsq/Kexbu/2/

If you are not using jQuery, your code should be:
function showDiv(advancedVal)
{
if(advancedVal) {
document.getElementById('moreOptions').style.display = "";
} else {
document.getElementById('moreOptions').style.display = "none";
}
}
and
<input name="advanced" type="checkbox" value="" id="advanced" onchange="showDiv(this.checked)">
Here's an example: http://jsfiddle.net/XN8aK/1/

change $('moreOptions') to $('#moreOptions')