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!
http://jsfiddle.net/k0paz2pj/
<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 = '';
});
}
}
JS Fiddle demo.
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 = '';
});
}
}
JS Fiddle demo.
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);
});
JS Fiddle demo.
References:
Array.prototype.forEach().
document.getElementsByTagName().
document.getElementsByName().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
String.prototype.toLowerCase().
String.prototype.trim().
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>
Related
I am trying to show a Div that contains a button element, but only when BOTH checkboxes have been "agreed" to.
I have tried to use JS to check this and then set the style display when each checkbox is clicked.
HTML:
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>
JS:
function showMe(box) {
var chbox1 = document.getElementByID("box1");
var chbox2 = document.getElementByID("box2");
var vis = "none";
if (chbox1.checked && chbox2.checked) {
vis = "block";
break;
}
document.getElementById(box).style.display = vis;
}
Fiddle: https://jsfiddle.net/nhykqodp/2/
I'm kinda new to JS and my HTML knowledge is about 10 years out of date at this point. Any help would be appreciated.
Thanks.
If I run your code, it shows:
Uncaught SyntaxError: Illegal break statement
Thats because a break
can only be used inside a loop.
Furthermore, you have a typo, it should be getElementById instead of getElementByID
Note: The d shouldn't be capitalised
Remove the break
Fix the typos:
function showMe(box) {
var chbox1 = document.getElementById("box1");
var chbox2 = document.getElementById("box2");
var vis = "none";
if (chbox1.checked && chbox2.checked) {
vis = "block";
}
document.getElementById(box).style.display = vis;
}
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>
Using an in-line if statement, we can remove the vis variable so we can alter the style right away like so:
function showMe(box) {
const chbox1 = document.getElementById("box1");
const chbox2 = document.getElementById("box2");
document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none';
}
function showMe(box) {
const chbox1 = document.getElementById("box1");
const chbox2 = document.getElementById("box2");
document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none';
}
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>
The syntax errors have already been pointed out; for hiding/showing elements these already have an API which is called el.hidden. I recommend you use it.
Aside from that, you shouldn't use inline event handlers like onclick. Instead, use EventTarget.addEventListener().
I've also generalized your code, so that any number of checkboxes can act as toggle for any element, given that element has the id that you define in data-toggle on the checkboxes.
const checkboxes = Array.from(document.querySelectorAll('[data-toggle]'));
function allChecked(toggle) {
return checkboxes.filter(cb => cb.dataset.toggle === toggle).every(cb => cb.checked);
}
for (const checkbox of checkboxes) {
checkbox.addEventListener('change', function() {
document.getElementById(this.dataset.toggle).hidden = !allChecked(this.dataset.toggle);
});
}
<div class="agreement_box">
<input type="checkbox" data-toggle="submit_btn">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" data-toggle="submit_btn">
</div>
<div id="submit_btn" class="profileSubmit_btn" hidden>
<button>
BUTTON
</button>
</div>
Little syntax error just replace document.getElementByID to document.getElementById
Any idea what I'm doing wrong?
https://jsfiddle.net/6hvtc749/
Here's the function I'm using:
<script>
function dblock_on() {
document.getElementById('donation').checked = true;
document.getElementById('dblock').style.display = "block";
document.getElementById('sblock').style.display = "none";
}
function sblock_on() {
document.getElementById('sponsorship').checked = true;
document.getElementById('sblock').style.display = "block";
document.getElementById('dblock').style.display = "none";
}
</script>
You're missing the #sblock div in your HTML which causes sblock_on() to error and exit before it can change the #dblock style. Either remove the references to #sblock in your function(s) or add that element to your html so that the scripts don't error/exit before they can finish running all of the code.
#dblock {
display: none;
}
<form action="" method="post">
<h3>Type</h3>
<input name="rtype" id="sponsorship" type="radio" value="sponsorship">
<label for="sponsorship" onclick="sblock_on()">Sponsorship</label>
<input name="rtype" id="donation" type="radio" value="donation">
<label for="donation" onclick="dblock_on()">Donation</label>
<div id="dblock">
<h3>Amount</h3>
<input name="amount" type="text" class="form_text" size="5px" maxlength="10" value="" placeholder="$0">
</div>
</form>
<script>
function dblock_on() {
document.getElementById('donation').checked = true;
document.getElementById('dblock').style.display = "block";
}
function sblock_on() {
document.getElementById('sponsorship').checked = true;
document.getElementById('dblock').style.display = "none";
}
</script>
I'm trying to create a real time preview of a paragraph based on the selections of a form both on the same page. I have been working with this code.
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}
</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' id='yes' name='yes'><br>
When? <input type='text' id='acc' name='acc'>
</div>
The result I'm wising is that there will be a pre-prepared paragraph and that will appear at the bottom of the form and will be changed based on the selection of the above options. Like, if 'Yes' is selected then this will appear:
Mr. X will be present in 'London' at '8am'
and if 'No' is selected, then this will appear:
Mr. X will be absent
Thanks in advance for helping.
Try the following:
<html>
<head>
</head>
<body>
Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' onchange="onLocationChange();" id='yes' name='yes'><br>
When? <input type='text' id='acc' onchange="onTimeChange();" name='acc'>
<div>
Mr. X will be present
<span id="location" style="display: none;"></span>
<span id="time" style="display: none;"></span>
</div>
</div>
<div id="ifNo" style="display:none">
Mr. X will be absent
</div>
<script>
function onLocationChange(){
var value = document.getElementById('yes').value;
if (value) {
document.getElementById('location').style.display = 'inline';
document.getElementById('location').innerHTML = ' in ' + value;
}
else {
document.getElementById('location').style.display = 'none';
}
}
function onTimeChange(){
var value = document.getElementById('acc').value;
if (value) {
document.getElementById('time').style.display = 'inline';
document.getElementById('time').innerHTML = ' at ' + value;
}
else {
document.getElementById('time').style.display = 'none';
}
}
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifNo').style.display = 'none';
}
else {
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'block';
}
}
</script>
</body>
</html>
I hope this this is your requirement
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
document.getElementById('targetDiv').innerHTML=""
}
else {
document.getElementById('targetDiv').innerHTML="Mr. X will be absent";
document.getElementById('ifYes').style.display = 'none';
document.getElementById('yes').value=""
document.getElementById('acc').value=""
}
}
function showResult(){
var yes=document.getElementById('yes').value
var acc=document.getElementById('acc').value
if(yes!="" && acc!="" ){
document.getElementById('targetDiv').innerHTML="Mr. X will be present in '"+yes+"' at '"+acc+"'"
}
else{
alert("Input are blank")
}
}
<!DOCTYPE html>
<html>
<body>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' id='yes' name='yes'><br>
When? <input type='text' id='acc' name='acc'>
<button type="button" onclick="showResult()">Show Result</button>
</div>
<div id="targetDiv"></div>
</body>
</html>
I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.
My code is here
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>
JavaScript
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else return false;
}
function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
document.getElementById('mainDiv').style.display = "none";
}
}
<div id="mainDiv">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
<input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
<div id="nameDiv"></div>
According to a similar question posted before there is no way to
change the confirm dialogs button.
I would suggest you can use bootstrap modal or jQueryUI.
There is even a workaround in the jQueryUI for this.
Or you can use bootstrap Modal. Here is the link for it
I hope my suggestions help with your problem.
You can do this
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else {
document.getElementById('Mydiv').style.display = 'none';
return false;
}
}
You can do like this also:
function confirm_hide(ele){
if(confirm('Do you wish to hide?')){
document.getElementById('Mydiv').style.display = 'block';
document.getElementById('mainDiv').style.display = 'none';
}
}
<div id="Mydiv" style="display:none;" >Haiii</div>
<div id="mainDiv">
<input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/>
</div>
HTML
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">
JS
var div = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");
button.addEventListener('click',confirm_hide());
function confirm_hide(){
var hide = confirm('Do you wish to hide?');
if(hide == true){
button.style.display = 'none';
div.style.display = 'block';
}
else{
button.style.display = 'block';
div.style.display = 'none';
}
}
How can I modify this code. Can I use one evenlistner there to implement the same result. What is the best practice in this case. Can I use here data atribute, or querySelector better. codepen
const myCheck = document.getElementById("check");
const myCheck2 = document.getElementById("check2");
const dib = document.getElementById("dib");
function change() {
if (myCheck2.checked) {
myCheck.checked = false;
dib.style.display = "block";
}
else{
dib.style.display = "none";
myCheck.checked = true;
}
}
function func2() {
if (this.checked) {
myCheck2.checked = false;
dib.style.display = "none";
}
else {
dib.style.display = "block";
myCheck2.checked = true;
}
}
myCheck2.addEventListener('click', change);
myCheck.addEventListener('click', func2);
<input type="checkbox" id="check" >
<input type="checkbox" id="check2" checked="checked" >
<div id="dib">Text</div>
Two improvements you could make to your existing code without changing the logic at all would be to use meaningful names for your functions, and to fix the indenting. But anyway...
If I've understood your existing code, the idea is that when either checkbox is checked the other should be automatically unchecked (in which case why not use radio buttons?), and the associated div should be displayed only if the second checkbox is checked? If so, you could combine the code into a single function as follows:
const myCheck = document.getElementById("check");
const myCheck2 = document.getElementById("check2");
const dib = document.getElementById("dib");
function cbChanged() {
(this === myCheck ? myCheck2 : myCheck).checked = !this.checked;
dib.style.display = myCheck2.checked ? "block" : "none";
}
myCheck2.addEventListener('click', cbChanged);
myCheck.addEventListener('click', cbChanged);
<input type="checkbox" id="check" >
<input type="checkbox" id="check2" checked="checked">
<div id="dib">Text</div>
Notice that the above still binds two event listeners, but to the same function.
Below is a more generic version that uses a container around the checkboxes and their associated div so that you could have multiple copies of that on the page all handled by one event listener wired up with a similar amount of JS to the previous version:
function cbChanged(e) {
const showCB = this.querySelector(".show");
const hideCB = this.querySelector(".hide");
(e.target === hideCB ? showCB : hideCB).checked = !e.target.checked;
this.querySelector("div").style.display = showCB.checked ? "block" : "none";
}
const containers = document.querySelectorAll(".container");
Array.prototype.forEach.call(containers, function(el) {
el.addEventListener('click', cbChanged);
});
<div class="container">
<input type="checkbox" class="hide" >
<input type="checkbox" class="show" checked="checked">
<div>Text One</div>
</div>
<div class="container">
<input type="checkbox" class="hide" >
<input type="checkbox" class="show" checked="checked">
<div>Text Two</div>
</div>
<div class="container">
<input type="checkbox" class="hide" >
<input type="checkbox" class="show" checked="checked">
<div>Text Three</div>
</div>