Change content of div via checkbox - javascript

I want my div to show content, then disappear when I click a checkbox and that it shows a second content in it. When the checkbox is unchecked then the div shows the previous content back and hides the current one.
Each div have one input box and a submit button.
Thank you
Code Example :
I am using this, want to be modified this to when checkbox clicked div1 disseper and show div2
<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>
<input type="checkbox" name="multi_note" id="checkboxes-0" value="1" onclick="showMe('div1', this)"> Show Div
<div id="div1" style="display:none">
<label>Example 1</label>
<select id="selectbasic" name="selectbasic" class="form-control">
</div>

<script>
x=false;
function Check(){
if(x){
document.getElementById("div1").style.display='inline';
document.getElementById("div2").style.display='none';
x=false;
}
else{
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='inline';
x=true;
}
}
</script>
Select Div<input type="checkbox" id="check" onclick="Check()">
<br>
<div id="div1">
<form>
<h2>First Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div1">
<form>
</div>
<div id="div2" style="display:none">
<form>
<h2>Second Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div2">
<form>
</div>
the fiddle http://jsfiddle.net/4XsYA/1/

If you are using jQuery, you can use following pseudo code for achieving this.
if($("input[type=checkbox]").prop(":checked")) {
//hide some div and show another
}
else {
// code for reversing the above show/hide
}

With jquery you could do something like this. Remember putting your <script> inside the <head> tag.
$(document).ready(function() {
$('#checkboxes-0').change(function() {
if($(this).is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div2").hide();
$("#div1").show();
}
});
});

Related

How to hide a div using radio button

I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}
Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>
Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.
Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>

javascript manipulating 2 checkboxes from a button

I got a button called Rework, when i click the button two checkboxes has to be appeared and Rework button should be disappeared and in place a submit button has to be appeared . How will i move on with this concept.?
You can do this like this: http://codepen.io/anon/pen/pjrwLe
**HTML**
<input type="button" id="rework-button" value="Rework" onclick="rework()"/>
<div id="checkboxes">
Check A: <input type="checkbox" />
Check B: <input type="checkbox" id="check-a" />
</div>
<input type="submit" id="submit-button" value="Submit"/>
**CSS**
#checkboxes,
#submit-button{
display:none;
}
**JAVASCRIPT**
function rework(){
document.getElementById("checkboxes").style.display = "block"
document.getElementById("submit-button").style.display = "block"
document.getElementById("rework-button").style.display = "none"
}
You can try something like this, when Rework is clicked, if it is not displayed as none, and show the checkboxes and submit button.
function reworkClick() {
if (document.getElementById("Rework").style.display != "none"){
document.getElementById("Rework").style.display = "none";
document.getElementById("Submit").style.display = "block";
document.getElementById("checkboxContainer").style.display = "block";
}
}
understand this and edit as you want:
<div class='checkbx' style="display:none;">
<!--here goes your checkboxes-->
</div>
<input type='button' class'button1'/>
<input type='submit' class'button2'/>
<script>
$('.button1').click(function(){
$('.checkbx').show();
$('.button2').show();
$('.button1').hide();
});
</script>
This is jquery ..Learn Jquery Ok. code less Do more
Note: just dont forget to include jquery files... read about jquery
try this
<div class="input_box">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit">
</div>
<div class="button">
<input type="button" class="Rework" value="Rework">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.input_box').hide();
$('.Rework').click(function(){
$('.button').hide();
$('.input_box').show();
});
});
</script>
Hope this helps!

JavaScript display a div when I click an input?

I want to display a block div when I clicked an input field.
<input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br>
<div class="input" style="display: none;"> Please help for our company! </br> <input type='text' name='help'> </br> </div>
How can I execute it?
Here is a simple non-jquery dependent solution:
<input class="indifferent" type="radio" name="decision" value="indifferent" onclick="document.getElementById( 'hidden' ).style.display = 'block' "> Indifferent <br>
<div id="hidden" class="input" style="display: none;"> Please help for our company! <br> <input type='text' name='help'> <br> </div>
$(".indifferent").click(function(){
$(".input").toggle();
});
Each click on .indifferent will change it's display between showing and hiding.
Add the following jQuery.
$('input').on('click', function() {
$('.input').css('display', 'block');
});
JS FIDDLE
I always prefer to add a class when click insteed of a sigle property (to whatever element) as it will allow you to add now or in the future more style to your div. It's more versatil:
$(document).ready(function () {
$('.indifferent').click(function () {
$('.input').addClass("display")
});
});
FIDDLE

how to pass text box value to java script after leaving from text box?

<html><body>
<input type="text" id="t1" name="t1" />
<input type="button" value="Edit"
onClick="edit(document.getElementById('t1').value)" />
<div id="div1" style="display: none">
<input type="text" id="t2" name="t2" value="2" />
</div>
<script>
function edit() {
x = document.getElementById('t1').value;
if (x == "1234") {
document.getElementById('div1').style.display = 'block';
alert(x);
} else {
document.getElementById("div1").style.display = 'none';
alert(x);
}
}
</script>
</body>
</html>
here i passed the value of text box t1 to script on click of button to disable the div, but i dont want to have button here, instead when am leaving from text box (after entering value) i have to call script from text box itself. but it needs pass the all entered value at text box.
like,
<input type="text" id="t1" name="t1" onclick="edit(document.getElementById('t1').value);" />
please help? i want it in javascript not jquery? please guide me.
You can trigger an onblur event on the text box.
When the focus moves out of the text box, call the function you need.
you may try like this,
<html>
<body>
<input type="text" id="t1" name="t1" />
<div id="div1" style="display: none">
<input type="text" id="t2" name="t2" value="2" />
</div>
<script>
var x = document.getElementById("t1");
x.addEventListener("blur", edit, true);
function edit() {
//do wat ever you want
}
</script>
</body>
</html>
Hope, It helps...

Making a button appear when a number is entered into the form

From this topic: how do i make an invisible text input box visible on hover?
I read this problem and it helps me a lot and I came with this code:
HTML:
<div id="box1">
<form action="">
<input type="string" name="amount" />
</form>
</div>
CSS:
#box1 {
width:100px;
height:30px;
}
#box1:hover input {
display:block;
padding:3px;
}
#input {
display:none;
}
My problem is that once I input the amount, I want the confirm button to show up. Is this possible?
Thanks in advance.
This should accomplish what you are after:
<!-- In the head of your document: -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').hide();
$('#amount').keyup(function() {
if ($(this).val() == '') {
$('#submit').hide();
}
else {
$('#submit').show();
}
});
});
</script>
<!-- For your form in the body: -->
<div id="box1">
<form action="">
<input type="string" name="amount" id="amount" />
<input type="submit" name="submit" id="submit" />
</form>
</div>
Based on your question I am guessing you are looking to make the confirm button appear as soon as a key is pressed in the text box. JQuery is a very helpful library for handling browser events, you should look into using that.
html:
<div id="box1">
<input type="text" id="txtAmount" />
<input type="button" id="btnConfirm" value="Confirm"/>
</div>
​
javascript/jquery:
//self invoking javascript function
$(function() {
//hide the button on page load
$('#btnConfirm').hide();
//listen for a keypress event
$('#txtAmount').on('keypress', function() {
$('#btnConfirm').show();
});
});​
here is the jsfiddle if you would like to try it http://jsfiddle.net/49Dhc/5/
Actually make the "confirm" button.
<div id="box1">
<form action="">
<input type="string" name="amount" />
<input type="submit" value="confirm" id="submit" style="display:none"/>
</form>
</div>
Anytime the element with name "amount" is changed or a key is pressed (onchange for backspaces) if the value is not "" or nothing then it'll display the submit button using inline css.
<script>
amount.onchange=amount.onkeyup=function(){
document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>

Categories