Javascript show div does not work when I press button

Javascript show div does not work when I press button - javascript

I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>

user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>

<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.

Related

Popup should show once per visit, shows every time instead

I want my popup to show only once per visit. What am I doing wrong? It shows every time I refresh the browser.
This is what I've got.
<body onload="myFunction()">
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
if (!cookie) {
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function() {
setTimeout(function() {
PopUp('show');
}, 1000);
}
localStorage.setItem('myPopup', 'true');
}
</script>
</body>

Move the If(!cookie) inside window.onload function
<body >
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
if(!cookie){
setTimeout(function() {
PopUp('show');
}, 1000); }
}
localStorage.setItem('myPopup','true');
</script>
</body>

How can i achieve the these with Javascript / Jquery?

I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. How can i achieve that using Javascript or Jquery or any possible method.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<div class="container">
<div id="myDiv">
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>

You almost got it, just need to make a few changes:
Add an Id for the xButton
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">×</span>
</button>
Remove onclick in the html Question button
<input id="info" type="button" value="QUESTION?" class="switchbuton">
Amd add a hanlder for the X button
$(function(){
var button = document.getElementById("info");
var xButton = document.getElementById("xButton");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
//hidding Question button
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
//showing Question button
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
//handler for the X button
xButton.addEventListener("click", hide, false);
});

Like Carorus said, you're almost there! Their example uses your code and it's probably best that you check that out and understand it.
If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for.
http://codepen.io/anon/pen/pJJKjZ?editors=101
$("#info").click(function(){
show()
});
$(".close").click(function(){
hide();
});
var show = function(){
$("#myDiv").css('visibility', 'visible');
$("#info").css('visibility','hidden');
}
var hide = function(){
$("#myDiv").css('visibility', 'hidden');
$("#info").css('visibility','visible');
}

Your already using JQuery, so you can handle both buttons with 1 line of code...
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
$('.button').click(function() { toggle(); });
});
And update your HTML to include a secondary class on your buttons, and remove the onClick attribute...
<div class="container">
<div id="myDiv">
<button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>

In jQuery you can do it like below. You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine.
function showForm() {
$('#myform').show();
$('#myClose').show();
$("#info").hide();
}
function hideForm() {
$('#myform').hide();
$('#myClose').hide();
$("#info").show();
}
$(function() {
$('#info').click(function() {
showForm();
});
$('#myClose').click(function() {
hideForm();
});
hideForm();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="myDiv">
<button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p id="q">QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span>
<input type="text" name="extensionField_Title" id="box1">
<br>
<span class="box2">Name</span>
<input type="text" name="extensionField_Name" id="box2">
<br>
<span class="box3">Теlephone</span>
<input type="text" name="extensionField_PhoneNumber" id="box3">
<br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo">
<br>
<option value="Chat_Csq23"></option>
</select>
<br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer">
<br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton">
</div>

Html Code:
<div class="container">
<div id="myDiv">
<button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"><br/><br/>
<span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"><br/><br/>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br/><br/>
<input type="submit" value="SUBMIT" id="boxbuton"><br/>
<input type="hidden" name="author" value="Customer"><br/>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
js Code
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
$("#hide").click(function(){
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
});
hide();
button.addEventListener("click", toggle, false);
});

Show DIV dynamically when clicking on Radio Selection

I have been supplied with this code that I can't seem to get working, I've looked around previous questions but can't find anything exactly like it. Maybe it's just totally wrong and should just start again?
What I want to do is show a div when a radio button is selected. Here is my code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[478]"]').change(function(){
var val1 = $("input[name='item_meta[478]']:checked").val();
if (val1== "España") {
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
if (val1== "Intracomunitario") {
document.getElementById("div2").style.display = "block";
document.getElementById("div1").style.display = "none";
}
}
</script>
<form>
Show form?
<input type="radio" onclick="frmCheckDependent(this.value,'478')" checked="checked" value="España" id="field_478-0" name="item_meta[478]">España
<input id="field_478-1" type="radio" onclick="frmCheckDependent(this.value,'478')" value="Intracomunitario" name="item_meta[478]">Intracomunitario
</form>
<div id="div1" style="display:none">
Custom form España
</div>
<div id="div2" style="display:none">
Custom form Intracomunitario
</div>
Thanks a lot !
A programmer told me I could do what I want to do with:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[988]"], input[name="item_meta[989]"]').change(function(){
var val1 = $("input[name='item_meta[988]']:checked").val();
var val2 = $("input[name='item_meta[989]']:checked").val();
if (val1 !=undefined && val2 != undefined)
{$("#field_keytotal").val(val1+' '+val2);}
});
});
</script>
And:
<form>
Show form?
<input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value);"/>Yes
<input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value);"/>No
</form>
<script type="text/javascript">
function showhideForm(showform) {
if (showform == "yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
if (showform == "no") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
<div id="div1" style="display:none">
[formidable id=18]
</div>
<div id="div2" style="display:none">
You are not qualified to see this form.
</div>
jsfiddle.net/cvn6n/72

You're missing a closing bracket. Add one before the </script>

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>

Registerscript (HTML and Javascript)

I'm working on a register script, but i'm stuck. I have an oppertunity to the user pay or free memberships. And when they choose "pay" the pay column becomes visible but if i after that choose "free" i see both the free and the pay column. But i only want one column be seen not both at the same time
Javascript
<script type="text/javascript">
function betal(value) {
if (value == 'show') { document.getElementById('betalversion').style.display = 'block'; }
else { document.getElementById('betalversion').style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') { document.getElementById('gratisversion').style.display = 'block'; }
else { document.getElementById('gratisversion').style.display = 'none'; }
}
</script>
HTML
<div class="FormGroup">
<h2 class="description">Vad skulle du vilja ha?</h2>
<label class="choice">
<input id="gratisVersion" name="field_Payment" type="radio" value="Gratis" class="required" onclick="gratis('show');">
Gratis Version</label>
<br />
<label class="choice">
<input id="betalVersion" name="field_Payment" type="radio" value="Betal" class="required" onclick="betal('show');">
Betal Version</label>
<br />
</div>
<div class="FormGroup" style="display: none" id="betalversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<div class="explanation">Här är nåt</div>
<input type="text" name="paypal_address" id="Text1" size="40">
</div>
<div class="FormGroup" style="display: none" id="gratisversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<label for="name">Användarnamn</label><input type="text" name="name" id="name"/>
<br />
<label for="pass">Lösenord</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<br />
<p>

<script type="text/javascript">
function betal(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'block';
document.getElementById('gratisversion').style.display = 'none';
}
else {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
else {
document.getElementById('gratisversion').style.display = 'none';
document.getElementById('betalversion').style.display = 'block';
}
}
</script>

<script type="text/javascript">
var beta=document.getElementById('betalversion');
var grati=document.getElementById('gratisversion');
function betal(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') {
beta.style.display = 'block'; }
else { beta.style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') { grati.style.display = 'block'; }
else { grati.style.display = 'none'; }
}
</script>
hide both the divs on toggle

We Keep Coding

JavaScript is the programming language of the Web.

Javascript show div does not work when I press button - javascript

Related

Popup should show once per visit, shows every time instead

How can i achieve the these with Javascript / Jquery?

Show DIV dynamically when clicking on Radio Selection

Getting divs to close if another one opens with Javascript

Registerscript (HTML and Javascript)

Categories

Resources