I have two radio buttons: Click the first radio button and a three textboxes appear if they start entering information and then change their mind and select the second radio button it does not clear the text they have entered. So what I am trying to figure out is if there is a way make it clear the text from those textboxes when a new radio button (of the same group) is chosen. Any help is greatly appreciated!
<input
type="radio"
value="Yes"
name="lien"
id="lien"
onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input
type="radio"
value="None"
name="lien"
id="nolien"
onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input
type="text"
name="lienlname"
id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input
type="text"
name="lienladdress"
id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input
type="text"
name="lienldate"
id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<br>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
One approach, staying with the plain JavaScript from your question/JS Fiddle demo:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
// getting all the input elements within '#div1' (using a CSS selector):
var inputs = document.querySelectorAll('#div1 input');
// iterating over those elements, using Array.prototype.forEach,
// and setting the value to '' (clearing them):
[].forEach.call(inputs, function (input) {
input.value = '';
});
}
}
A marginally more concise form of the above (or, if not more concise, with less repetition):
function showhideForm(lien) {
var isYes = lien.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
And, finally, a version that moves away from the obtrusive JavaScript of in-line event-handling ( onclick
, onchange
, etc):
function showhideForm() {
// 'this' in the function is the radio-element to which
// the function is bound as an event-handler:
var isYes = this.value.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
// finding the elements with the name of 'lien':
var lienRadios = document.getElementsByName('lien');
// iterating over those elements, using forEach (again):
[].forEach.call(lienRadios, function (lien) {
// adding a listener for the 'change' event, when it
// occurs the showhideForm function is called:
lien.addEventListener('change', showhideForm);
});
References:
You can always use this when another radio
is checked:
$("#div1 .clearfix input:text").val("");
function showhideForm(lien) { if (lien == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } else if (lien == "None") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; $("#div1 .clearfix input:text").val("");//here use to clear inputs } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);"/><label for="lien">Lien</label> <input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label> <div id="div1" style="display:none"> <div class="clearfix"> <p> <label for="lname">Lienholder Name:</label> <input type="text" name="lienlname" id="lienlname"> </p> <p> <label for="laddress">Lienholder Address:</label> <input type="text" name="lienladdress" id="lienladdress"> </p> <p> <label for="ldate">Date of Lien:</label> <input type="text" name="lienldate" id="datepicker2"> </p> </div> </div> <div id="div2" style="display:none"> <!---You are not qualified to see this form.---> </div>
After (hate) comments (kidding) a js approach:
function showhideForm(lien) { if (lien == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } else if (lien == "None") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; //js container = document.getElementById('div1'); inputs = container.getElementsByTagName('input'); for (index = 0; index < inputs.length; ++index) { inputs[index].value = ""; } } }
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);" /> <label for="lien">Lien</label> <input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);" /> <label for="nolien">No Lien</label> <div id="div1" style="display:none"> <div class="clearfix"> <p> <label for="lname">Lienholder Name:</label> <input type="text" name="lienlname" id="lienlname"> </p> <p> <label for="laddress">Lienholder Address:</label> <input type="text" name="lienladdress" id="lienladdress"> </p> <p> <label for="ldate">Date of Lien:</label> <input type="text" name="lienldate" id="datepicker2"> </p> </div> </div> <div id="div2" style="display:none"> <!---You are not qualified to see this form.---> </div>
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.