how to show and hide divs based on radio button click? - javascript

I am trying to do show and hide div base on radio button click but it can not work perfect.
I am currently using javascript function to control the content display.
This is javascript code :
function udatabase() {
document.getElementById('ifCSV').style.display = "none";
}
function ucsv() {
document.getElementById('ifCSV').style.display = "block";
}
This is my radio button:
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
<div id="ifCSV" style="display:none">
<input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
</div>
After click on csv, there is no response in html page.

Your javascript onclick function name cannot same with your id name inside input text. You should change one of the name.
Your html code here:
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
After edited
<input type="radio" name="data" onclick="udatabase()" id="tdatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="tcsv"> CSV <br/>
This should be work properly after you change the name.

<script type="text/javascript">
window.onload = function() {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
}
function yesnoCheck() {
var testA=document.getElementById('testAmount').value;
var dola=document.getElementById('fxd').value;
if (document.getElementById('s').checked) {
if(testA>50000){
document.getElementById('ifTSH').style.display = 'block';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
else{
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
if (document.getElementById('d').checked) {
if((testA*dola)>50000){
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'block';
document.getElementById('ifUSD1').setAttribute("required", "true");
}
else {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
}

Related

Javascript radiobutton show and hide field

Hi I will try to give only the needed information
I have a div container with 3 radiobuttons. ids "rad1", "rad2", "rad3"
I have 2 textfields in a form with ids "textField1" , "textField2".
I want to show different textFields depending on which radio button is clicked.
if ("rad1" is clicked) I want to show "textField1"
if ("rad2" is clicked) I want to show "textField2"
if (rad3 is clicked/nothing is clicked) I want to hide both.
This is my JavaScript that I though would work but does not.
fieldShower();
function fieldShower() {
if (document.getElementById('rad1').checked) {
document.getElementById('textField1').style.display = 'block';
document.getElementById('textField2').style.display = 'none';
} else if(document.getElementById('rad2').checked) {
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'block';
} else {
//hide both
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'none';
}
}
You had to set an onClick-event on your input-fields either in your html or in your JS code. For simplicity I gave all 3 radiobuttons the same name so allways only one can be clicked at the same time.
function fieldShower() {
if (document.getElementById('rad1').checked) {
document.getElementById('textField1').style.display = 'block';
document.getElementById('textField2').style.display = 'none';
} else if(document.getElementById('rad2').checked) {
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'block';
} else {
//hide both
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'none';
}
}
<input type="radio" id="rad1" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad2" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad3" name="myRadio" onClick="fieldShower()">
<div id="textField1">Text1</div>
<div id="textField2">Text2</div>
Hope this sample helps you :
var ex1 = document.getElementById('rad1');
var ex2 = document.getElementById('rad2');
var ex3 = document.getElementById('other');
var txt1 = document.getElementById('fname');
var txt2 = document.getElementById('lname');
ex1.onclick = handler;
ex2.onclick = handler1;
ex3.onclick = handler2;
function handler(){
txt1.type='show';
txt2.type='hidden';
}
function handler1(){
txt2.type='show';
txt1.type='hidden';
}
function handler2(){
txt1.type='hidden';
txt2.type='hidden';
}
textField1:<input type="hidden" id="fname" name="fname"><br><br>
textField2:<input type="hidden" id="lname" name="lname"><br><br>
<input type="radio" id="rad1" name="gender" value="male">
<label for="rad1">rad1</label><br>
<input type="radio" id="rad2" name="gender" value="female">
<label for="rad2">rad2</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">rad3</label>

how to count check checkboxes in a specific div JAVASCRIPT

I would like to alert the amount of check boxes that are checked in a specific div (not the ones in the <head>!), here is the code :
HTML
<div class="changer">
<label><input id="mode" type="checkbox" name="mode" value="Mode" onclick="mode()" />Mode</label><br />
<label><input id="map" type="checkbox" name="map" value="Map" onclick="map()"/>Map</label><br />
<label><input id="joueurs" type="checkbox" name="joueurs" value="Joueurs" onclick="joueurs()" />Joueurs</label><br />
<label><input id="points" type="checkbox" name="points" value="Points" onclick="points()" />Points</label><br />
</div>
</head>
<body>
<div id="text">
</div>
</body>
<button id="send" onclick="send()">Envoyer</button>
Javascript
function joueurs() {
if((document.getElementById("joueurs").checked == true)) {
joueursall.style.display = 'inline';
text.style.display = 'inline';
}
else {
if((document.getElementById("mode").checked == true)) {
modeall.style.display = 'none';
document.getElementById('mode').checked = false;
}
joueursall.style.display = 'none';
text.style.display = 'none';
}
}
document.getElementById("playerlist").addEventListener("change", function() {
var selected = this.value;
document.getElementById("text").innerHTML = "";
var html = '';
for (var i = 0; i < selected; i++) {
html += '<div class="grpjoueur"> <span class="sub-text">Player</span> <label><input type="checkbox" name="botbot" value="BOT"/>BOT</label </div>';
}
document.getElementById("text").innerHTML = html;
});
Here is the Javascript, it adds 'Joueurs' Dropdownlist if Joueurs is checked and then pop X times something, including a check box, according to the number selected in the Dropdownlist in the #text div
I tried multiple things but always return 0 or all the checkboxes...
In vanilla JS you can use querySelectorAll to query the checkboxes, and then .length to get the number of checkboxes.
var checkboxes = document.querySelectorAll("input[type='checkbox']");
alert(checkboxes.length);
CodePen Demo
If you want to alert only the length of the checked checkboxes, you can query them like this:
var checkedInputs = document.querySelectorAll("input:checked");
alert(checkedInputs.length);
CodePen Demo
when you click on the button, it will alert the number of checked boxes

making a div appear and disappear using javascript

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>

Make a div invisible in JavaScript after confirmation

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';
}
}

Radio button clears text boxes

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>

Categories

Resources