making a div appear and disappear using javascript - 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>

Related

Automatically generate paragraph based on the elements on the web form

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>

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

Show div upon submit

I am wanting to show a div (depending on the the value input) but I am seeing no errors in the console to point me in the right direction but there is something wrong with my code:
<style type="text/css">
#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}
</style>
</head>
<body>
<form method="POST" onsubmit="return showResults()">
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<input type="submit" id="submit" />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
<script>
function showResults(){
if(value <= 100){
document.getElementById('outputOne').style.display = "block";
return true;
} if(value > 500){
document.getElementById('outputTwo').style.display = "block";
return true;
}if(value > 10000){
document.getElementById('outputThree').style.display = "block";
return true;
}
}
</script>
If you want to see something you should prevent submit by returning false instead of true because now the form will be submited in all the cases and you will never see the div shown since the page will be refreshed.
Hope this helps.
You need to define value variable
And then return false on every if so that div will show on submit otherwise page will refresh and all default setting will be shown
Ok, so there are a few problems:
You never define value inside that function... you need to do that. Second, a form submission will refresh the page, undoing any DOM changes you did. This can be fixed by changing it to a button which calls your function. Here's an updated version of your code that works:
<style type="text/css">
.hide{display: none;}
.show{display: block;}
.submit{height:20px; width: 100px;}
</style>
</head>
<body>
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<button id="submit" class="submit" onClick="showResults()"></button>
<div id="outputOne" class="hide" >Value One</div>
<div id="outputTwo" class="hide" >Value Two</div>
<div id="outputThree" class="hide" >Value Three</div>
<script>
function showResults(){
var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value);
if(value <= 100){
document.getElementById('outputOne').className = "show";
} else {
document.getElementById('outputOne').className = "hide";
}
if(value > 500){
document.getElementById('outputTwo').className = "show";
} else {
document.getElementById('outputTwo').className = "hide";
}
if(value > 10000){
document.getElementById('outputThree').className = "show";
} else {
document.getElementById('outputThree').className = "hide";
}
}
</script>
I've also switched the css to use classes, which is a bit more flexible and better practice.
Credit to Zakaria Acharki and mohsin azeem for spotting the form error causing a refresh, and to the always-helpful charlietfl for that and for pointing out my own silly error for the submit button.
Try substituting oninput event for onsubmit event
<head>
<style type="text/css">
#outputOne {
display: none;
}
#outputTwo {
display: none;
}
#outputThree {
display: none;
}
</style>
<script>
function showResults() {
var value = this.value;
console.log(value);
if (value <= 100) {
divs[0].style.display = "block";
divs[1].style.display = divs[2].style.display = "none";
}
if (value > 500) {
divs[1].style.display = "block";
divs[0].style.display = divs[2].style.display = "none";
}
if (value > 10000) {
divs[2].style.display = "block";
divs[0].style.display = divs[1].style.display = "none";
}
}
window.onload = function() {
divs = document.querySelectorAll("div[id^=output]");
Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
, function(el) {
el.setAttribute("placeholder", "enter a number");
el.oninput = showResults;
});
}
</script>
</head>
<body>
<form method="POST">
<input type="text" id="valueOne" />
<br />
<input type="text" id="valueTwo" />
<br />
<input type="text" id="valueThree" />
<br />
<input type="submit" id="submit" disabled />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
</body>

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>

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

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");
}
}
}

Categories

Resources