How to clear text inside text field when radio button is select - javascript

Currently I have this radio buttons
Eletronics
Computers
Others
What I am trying to do is, if radio button Others is selected, I would like to display an input text field and let the user type.
What I would like to do is, when I select Others and type something inside the input field, then when I choose back to Eletronics or Computers, I would like to clear the text that I wrote inside input field.
Please kindly provide me with the solution of JavaScript or jQuery.
Here is my code sample. Please kindly check it: http://jsfiddle.net/dnGKM/

UPDATE
$('input:radio').on('click', function() {
if($(this).attr('id') == 'others') {
$('#showhide').css('opacity', 1.0);
} else {
$('#showhide').css('opacity', 0).find('input:text#others_text').val('');
}
});​
DEMO

You can use this:
document.getElementById("others_text").value='';
to clear the input field.

Please add below code of line in your code:
document.getElementById("others_text").value = '';
now its look like:
document.getElementById("others").addEventListener("click", function()
{
document.getElementById("others_text").value = '';
document.getElementById("showhide").style.opacity = 1;
}, false);
document.getElementById("computers").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);
document.getElementById("electronics").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);​
This would be helpful for you.

Try with this Solution:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').show();
} else {
$('#others-text').hide();
$('#others-text').val('');
}
});
})
Here there is a JSFiddle link:
http://jsfiddle.net/dnGKM/4/

You add the jQuery tag to your question, so that should do the trick using jQuery :)
CSS:
.hidden {
display: none;
}
HTML:
<label for="electronics">Electronics</label>
<input type="radio" id="electronics" name="rdbutton" />
<label for="computers">Computers</label>
<input type="radio" id="computers" name="rdbutton" />
<label for="others">Others</label>
<input type="radio" id="others" name="rdbutton" />
<input type="text" id="others-text" name="others-text" class="hidden" />
JS:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').removeClass('hidden');
} else {
$('#others-text').addClass('hidden');
$('#others-text').val('');
}
});
});

===============HTML
<input type="radio" name="rdo" value="1" checked="checked" />Electronics
<input type="radio" name="rdo" value="2" />Computers
<input type="radio" name="rdo" value="3" />Others
===============jQuery
$('input[name=rdo]').change(function() {
var a = $(this).val();
if (a != 3) {
$('#textboxid').hide();
}else{
$('#textboxid').val('');
$('#textboxid').show();
}
});

$("#<%=text1.ClientID%>").val('');

Related

Displaying content when a checkbox is ticked [duplicate]

I have this code:
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
And I would like to show/hide the "answer" fieldset (default is hidden) after a click on the checkbox in fieldset "question" How to do that. I wasn't able to do that using the technique for a classic elemetn like:
<script>
$().ready(function(){
$('.question').live('click',function() {
$('.answer').show(300);
}
,
function(){
$('.answer').hide(200);
}
);
});
</script>
Could somebody help me how to do that using checkbox? Also if possible to null (uncheck) the checkbox when it's hidden.
Try this
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show(300);
} else {
$(".answer").hide(200);
}
});
FIDDLE
Attach onchange event to the checkbox:
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>
<script type="text/javascript">
function valueChanged()
{
if($('.coupon_question').is(":checked"))
$(".answer").show();
else
$(".answer").hide();
}
</script>
Simplest - and I changed the checkbox class to ID as well:
$(function() {
$("#coupon_question").on("click",function() {
$(".answer").toggle(this.checked);
});
});
.answer { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field" />
</fieldset>
Try
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
$(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']()
});
});
Demo: Fiddle
Or
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
var answer = $(this).closest('.question').next('.answer');
if(this.checked){
answer.show(300);
} else {
answer.hide(300);
}
});
});
Try this
<script>
$().ready(function(){
$('.coupon_question').live('click',function()
{
if ($('.coupon_question').is(':checked')) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
});
</script>
$(document).ready(function() {
$(document).on("click", ".question", function(e) {
var checked = $(this).find("input:checkbox").is(":checked");
if (checked) {
$('.answer').show(300);
} else {
$('.answer').hide(300);
}
});
});
<label onclick="chkBulk();">
<div class="icheckbox_flat-green" style="position: relative;">
<asp:CheckBox ID="chkBulkAssign" runat="server" class="flat"
Style="position:
absolute; opacity: 0;" />
</div>
Bulk Assign
</label>
function chkBulk() {
if ($('[id$=chkBulkAssign]')[0].checked) {
$('div .icheckbox_flat-green').addClass('checked');
$("[id$=btneNoteBulkExcelUpload]").show();
}
else {
$('div .icheckbox_flat-green').removeClass('checked');
$("[id$=btneNoteBulkExcelUpload]").hide();
}

How to hide radio button until something happens?

So I want to hide a radio button until my form is filled out but I don't know how. I tried .hide(); and that worked when I put it outside of my .submit function but doesn't work inside of it. This is using jquery and bootstrap.
Here is a small version of the JS I have ('agree' is the radio button):
$('myForm').submit(function(e){
var firstName = $('first-name').val();
var pattern = /^$/;
var error = '';
var checkbox = document.getElementById('agree');
if(pattern.test(firstName)){
error += 'Error: enter first name.\n';
}
if(error.length != 0){
alert(error);
e.preventDefault();
}
});
I want to hide the radio button until the first name part of the form is filled out then the radio button will appear.
Put an id in your radio like this :
<input type="radio" id="rad" />
Then hide it like this using jquery :
$('#rad').hide();
Then an example of how you can make it show when something happens would go a bit like this :
If ($('#something') > 10) {
$('#rad').show();
}
Hope this helped :)
I would use plain JavaScript for this:
<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>
Edit:
Other ways to do this is to use onkeydown, onkeyup or onblur instead of onchange
Here is a simple example using jquery... http://jsfiddle.net/wa8rxj43/2/
HTML
<input type="text" id="name" class="name">
<input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>
JavaScript
$('#somecheck').hide();
$("#name").bind({
'input':function(){
if(this.value.length > 0)
{
$('#somecheck').show();
}
else
{
$('#somecheck').hide();
}
}
});
Edit: Removed CSS per OP's request.

Show div when radio button selected

I am novice in javascript and jQuery.
In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible.
If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
How should I change my script to achieve that?
I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
jsFiddle example
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
http://jsfiddle.net/2SsAk/2/
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
JSFIDDLE

Need Help To Uncheck Radio Button If Aleady Checked Using Jquery

i need help to uncheck or check same radio button if button already checked? I have jquery function which is used to enable or disabled other radio buttons if already checked now i want to add some function that use for check or uncheck same radio button?
(function ($) {
$(document).ready(function () {
$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
});
})(jQuery);
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
Although it is too late to answer, it could help others
I tried this solution.
Works very well for me!
$("input[type='radio'].myClass").click(function(){
var $self = $(this);
if ($self.attr('checkstate') == 'true')
{
$self.prop('checked', false);
$self.each( function() {
$self.attr('checkstate', 'false');
})
}
else
{
$self.prop('checked', true);
$self.attr('checkstate', 'true');
$("input[type='radio'].myClass:not(:checked)").attr('checkstate', 'false');
}
})
Simply replace disabled with checked:
$input.prop("checked", false);
or for this element:
this.checked = false;
However, if you are looking for form element which can be checked and unchecked, maybe input type="checkbox" /> is what you need.
$inputs.filter(':checked').prop('checked', false);
I think you need checkbox instead of radio button to uncheck the checked :
<input class="checkDisable" type="checkbox" value="Test1" />Test1
<input class="checkDisable" type="checkbox" value="Test2" />Test2
<input class="checkDisable" type="checkbox" value="Test3" />Test3
<input class="checkDisable" type="checkbox" value="Test4" />Test4
(function ($) {
$(document).ready(function () {
$('input:checkbox.checkDisable').change(function(){
var $inputs = $('input:checkbox.checkDisable')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
$(this).prop('checked',false);
}
})
});
})(jQuery);
The answer of Pablo Araya is good, but ...
$self.prop('checked', true);
is superfluous here. The radio button already has a checked state for every click.

Fairly easy JQuery Input Selection location problem

I am having a problem with getting my JQuery javascript code to apply to the select box elements that it is supposed to. What's happening is that the select boxes are not following the actions that are specified in the javascript code. They are simply staying disabled and checked (see code below) instead of changing based on the first checkbox's selection.
I believe it is a problem regarding how I specify the location of the select boxes in the javascript code, but I don't know how to go about fixing it. Then again, I could be wrong about that too.
If you have any insight on this or can correct the code, please do! Cheers.
HTML:
<div class="medium_box">
<form name="searchform" class="FECKsearch" method="get" onSubmit="return dosearch();">
<input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
<input type="submit" name="searchsubmit" class="button" value="Go" />
<span class="searcher">International: <input type="checkbox" id="International" checked="yes"></input></span>
<span class="searcher1">Americas: <input type="checkbox" id="Americas" disabled checked="yes"></input></span>
<span class="searcher1">Europe: <input type="checkbox" id="Europe" disabled checked="yes"></input></span>
Asia: <input type="checkbox" id="Asia" disabled checked="yes"></input>
</form>
</div>
Javascript:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
Update & Solution:
Cheers to John for the code $('#International').live("click",function() { which corrected the error of the JQuery code not functioning. Apparently if you are importing the code from a remote file you must include the "live" portion inside of your coding.
Thanks again John!
$('#International').live("click",function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
For Dynamic content (includes and element dom creation after page load) use live.
Have a nice day
There's a lot of room for tightening the following code up, but it works:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
if (!$('#Americas').is(':checked')) {
$('#Americas').click();
}
$('#Americas').attr('disabled', 'disabled');
if (!$('#Europe').is(':checked')) {
$('#Europe').click();
}
$('#Europe').attr('disabled', 'disabled');
if (!$('#Asia').is(':checked')) {
$('#Asia').click();
}
$('#Asia').attr('disabled', 'disabled');
} else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});

Categories