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>
Related
I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out
HTML
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" onclick="myFunction()" name="html"></div>
</div>
</div>
Javascript
<script>
function checkFunction() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("testing");
var checkBox2 = document.getElementById("myCheck2");
var text2 = document.getElementById("video");
var checkBox3 = document.getElementById("myCheck3");
var text3 = document.getElementById("html");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
} else {
text.style.display = "none";
if (checkBox2.checked == true){
text2.style.display = "block";
text.style.display = "none";
text3.style.display = "none";
} else {
text2.style.display = "none";
if (checkBox3.checked == true){
text3.style.display = "block";
text2.style.display = "none";
text.style.display = "none";
} else {
text3.style.display = "none";
text.style.display = "none";
text2.style.display = "none";
}
}
}
}
</script>
</script>
<script type="text/javascript">
$('.check').on('change', function() {
$('.check').not(this).prop('checked', false)
});
</script>
as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality
Check this Out
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
$('input.check').not(this).prop('checked', false);
$('input.check').not(this).parent('div').css('display', 'none');
}
else{
$('input.check').parent('div').css('display', '')
}
})
})
</script>
<body>
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
</div>
</div>
</body>
</html>
Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.
<script type="text/javascript">
$('.check').on('change', function() {
var text = document.getElementById("testing");
var text2 = document.getElementById("video");
$('.check').not(this).prop('checked', false)
var res = $(this).val();
console.log("res is: " + res);
if (res == '1') {
text.style.display = "block";
text2.style.display = "none";
}
else {
text.style.display = "none";
text2.style.display = "block";
}
});
</script>
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.
I have a confusion in my javascript code since I'm not familiar with js.I have three radio buttons with hidden inputs.Now, if i click radioBtn1, the hidden inputs will show up.What i want is if when i click the radioBtn2 or radioBtn3, the hidden inputs in radioBtn1 should be hidden again.So meaning to say when i click any radioBtn the second time around,the radioBtn that i've click first, its hidden inputs should be hidden again.
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br>
<div id="allowance" style="display: none;">
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br>
<div id="tuition_fee" style="display: none;">
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School
<div id="school_supply" style="display: none;">
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
You can reduce your code by using jquery. Please have a look on the below code, it may help you.
$( document ).ready(function() {
$('.sub_list').css('display','none');
$('input[type=radio]').change(function() {
$('.sub_list').css('display','none');
$('#'+this.value).css('display','block');
console.log(this.value);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="allowance" id="test" > Allowance<br>
<div id="allowance" class="sub_list" >
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="tuition_fee" id="test2" > Tution<br>
<div id="tuition_fee" class="sub_list" >
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="school_supply" id="test3" > School
<div id="school_supply" class="sub_list" >
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
before showing an input close the others:
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}
Because your logic is partial, you are showing the fields, but not hiding other fields.
function Allowance(select){
if(select.value=="Allowance"){
document.getElementById('allowance').style.display = "block";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "block";
}
}
Fiddle here:
https://jsfiddle.net/vjb2dnpg/
each of the 3 code snippets 'on.change();' below work individually, but appears to fail when they are all brought onto the same page. I think this has something to do with the 'this.checked' area - it seems this only reads the last one elem3 any suggestions would be amazing. Seeking JS not jQuery.
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
the HTML is below; what is supposed to occur is only divs in relation to the checkboxs should show when a checkbox is selected. So if the first checkbox is selected on, that checkbox and it's wrapper should show, if all 4 are checked, these 4 should show. 2, 3 etc. The ones that are not selected should hide. Again my JS code works individually, but when I want to do all on that same page, they fail.
HTML
<div class="container" id="records" style="background-color:#fff">
<br/>
<div class="row" id="item1">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 1!</h1>
<p>Item 1 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<input type="checkbox" id="check1" name="sample[]"/> This is a checkbox1</label>
<br />
</div>
</div>
</div>
<div class="row" id="item2">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 2!</h1>
<p>Item 2 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check2" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item3">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 3!</h1>
<p>Item 3 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check3" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item4">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 4!</h1>
<p>Item 4 I'm a hidden div!</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check4" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p>
</div>
</div>
</div>
Ok, you question is still unclear, and I will update the answer. But if it is working correctly as in John Bupit's https://jsfiddle.net/wz5sxehn/ - your problem is a simple logical error, not a code error.
Is this JSFiddle working the same as your code?
The problem is you are doing this for every element:
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
For every check-box. One will then hide the other while unhiding itself!
See this running as you want to with minimal changes to the code: https://jsfiddle.net/wz5sxehn/3/
With your HTML: https://jsfiddle.net/wz5sxehn/6/
As others have mentioned, your requirements are not crystal clear. Still, I think this code does what you need.
https://jsfiddle.net/6g0ows2g/
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1'),
elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2'),
elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3'),
elem4 = document.getElementById('item4'),
checkBox4 = document.getElementById('check4');
function updateOptions() {
document.getElementById("item1").style.display = "block";
document.getElementById("item2").style.display = "block";
document.getElementById("item3").style.display = "block";
document.getElementById("item4").style.display = "block";
}
function toggleBlocks(elem, checkBox) {
updateOptions();
checkBox.checked = false;
elem.style.display = "none";
}
checkBox.onchange = function () {
toggleBlocks(elem, checkBox);
};
checkBox2.onchange = function () {
toggleBlocks(elem2, checkBox2);
};
checkBox3.onchange = function () {
toggleBlocks(elem3, checkBox3);
};
checkBox4.onchange = function () {
toggleBlocks(elem4, checkBox4);
};
As a side note, whenever you find yourself repeating a lot of similar code, group that code into a function and use parameters. I find it helps in removing the clutter that hides syntax errors and logic errors.
updateOptions() can be made more elegant, but I'll leave that up to you. Remember, make it work, make it right, make it fast.
I was playing with your code.
As you asked, I've put the 3 code snippets together on the same page and it worked the way it seems to me it was meant to be in your proposal..
The page is always loaded with 'Item-3' visible, because the 'checkBox3.onchange' initiates the elements this way overwriting any previous configuration made by previous 'onchanges'.
(i.e: and at the end of the script 'checkBox3' is configured as unchecked and the item3 as display=block which makes it visible).
if you want to hide item-3 on the page load just uncomment the last line:
//onload (document.getElementById("item3").style.display = "none");
AFAIK, we should avoid mixing javascript and html this way.
Anyway here it goes the code...
I hope it helps (tested on firefox)
<!DOCTYPE HTML>
<html><head><title>Javascript Test</title>
</head>
<body> <h3>Checkbox test</h3>
<form name="CheckBoxes">
<label for="check1">Checkbox 1</label>
<input type="checkbox" name="check1" Id="check1" tabindex="1"><br><br><br>
<label for="check2">Checkbox 2</label>
<input type="checkbox" name="check2" Id="check2" tabindex="2"><br><br><br>
<label for="check3">Checkbox 3</label>
<input type="checkbox" name="check3" Id="check3" tabindex="3"><br><br><br>
</form>
<p id="item1"> Item-1</p><p id="item2"> Item-2</p><p id="item3"> Item-3</p><p id="item4"> Item-4</p>
<script language="javascript">
var elem = document.getElementById('item1'),
// var elem2 = document.getElementById('item2'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
// var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
// var elem2 = document.getElementById('item2'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
//onload (document.getElementById("item3").style.display = "none");
</script>
</body>
</html>
I have added a JavaScript onclick attribute to an HTML DIV tag.
I am using multiple onclick attributes in a single DIV tag. Each onclick contains various tags.
What I want is when I click one onclick tag it should display its very own tag in the DIV tag.
And when I click another onclick tag it should display its tag in the same tag but it should clear the previous value.
HTML:
<div id="mobi" style="display:none;" class="answer_list" > mobile</div>
<div id="elec" style="display:none;" class="answer_list" > electric</div>
<div id="vehi" style="display:none;" class="answer_list" > vehicles</div>
<div id="home" style="display:none;" class="answer_list" > home</div>
<div id="pets" style="display:none;" class="answer_list" > pets</div>
<div id="book" style="display:none;" class="answer_list" > book</div>
<div id="main">
<p name="answer" value="Show Div" onclick="mob()" >Mobile</p>
<p name="answer" value="Show Div" onclick="ele()" >Electronics</p>
<p name="answer" value="Show Div" onclick="veh()" >Vehicle</p>
<p name="answer" value="Show Div" onclick="hme()" >Home & Furniture</p>
<p name="answer" value="Show Div" onclick="pet()" >Pets</p>
<p name="answer" value="Show Div" onclick="boo()" >Books CD & Hobbies</p>
</div>
JavaScript:
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
function pet() {
document.getElementById('pets').style.display = "block";
}
function boo() {
document.getElementById('book').style.display = "block";
}
function mob() {
first();
document.getElementById('mobi').style.display = "block";
}
function ele() {
first();
document.getElementById('elec').style.display = "block";
}
function veh() {
first();
document.getElementById('vehi').style.display = "block";
}
function hme() {
first();
document.getElementById('home').style.display = "block";
}
function pet() {
first();
document.getElementById('pets').style.display = "block";
}
function boo() {
first();
document.getElementById('book').style.display = "block";
}
function first(){
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
document.getElementById('pets').style.display = "none";
document.getElementById('book').style.display = "none";
}