How to hide a div using radio button - javascript

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>

Related

Add an animation to a Show/Hide Checked Box

I use this javascrpit code to show/hide a div when a specific checkbox is checked
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
$('#delivery').toggle($('#store').prop('checked'));
}).trigger('init-choice1');
});
How can I add an animation to my delivery div when the choice1 checkbox is checked ?
Here an actual exemple of what result I have without animation : https://jsfiddle.net/6h4u3a1b/
Thanks in advance,
~Quentin
You can do, for example:
$( document ).ready(function(){
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeIn();
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
or instead of the "if ..." simply:
$('#delivery').fadeToggle();
This will show a little flicker at the beginnig so you youd have to add this style rule to prevent it:
.two { display: none }
Replace fadeIn/fadeOut with slideUp/slideDown for a different animation our use jQuery's animate() function to animate whatever CSS rule you want.
Here's my solution: Hope it helps!
$( document ).ready(function(){
$("#delivery").hide();
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeTo(100, 0.1).fadeTo(200, 1.0);
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="one">
<p>
<input name="choice1" type="radio" id="download" checked />
<label for="download">Download</label>
</p>
<p>
<input name="choice1" type="radio" id="store" />
<label for="store">Store</label>
</p>
</div>
<div class="two" id="delivery">
<p>
<input name="choice2" type="radio" id="x" />
<label for="x">Add to X</label>
</p>
<p>
<input name="choice2" type="radio" id="y" />
<label for="y">Add to Y</label>
</p>
</div>

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

draggable JQuery DIV don't work

i have some problem to use some JQuery code,when a div appear doesen't take the draggable property. This div appeare when the user simply press a button. The other command on the div (hide and show for example),works fine,but the draggable...not
This is the script code in tag:
<script type="text/javascript" src="System/Menu/interface.js"></script>
<script type="text/javascript" src="System/Menu/jquery.js"></script>
<script type="text/javascript" src="System/Menu/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//slide pannello start
$(".btn-slide").click(function () {
$("#startmenu").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
$("#layer1").hide();
$('#preferences').click(function () {
$("#layer1").show();
$('#layer1').Draggable();
});
$('#close').click(function () {
$("#layer1").hide();
});
});
</script>
and this is the div in tag:
<div id="layer1">
<div id="layer1_handle">
[ x ]
Preferences
</div>
<div id="layer1_content">
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked" value="Default" />Default<br />
<input type="radio" name="display" value="Option A" />Option A<br />
<input type="radio" name="display" value="Option B" />Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked" value="Enabled" />Enabled<br />
<input type="radio" name="autosave" value="Disabled" />Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
</div>
</div>
Dunno why,but i think is whitout dubts an error of code,is the first time i work with jquery and the draggable div.
Thanks to all want to help me :)
Due to the source highlighting this typo sticks out like a sore thumb:
$('#layer1').draggable(); // should be lowercase
You also need to make sure you're including the jquery-ui script:
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
I also don't see any HTML that has the preferences id.
<span id='preferences'>Preferences</span>

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