How to clear text inside text field when radio button is select
Solution 1
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('');
}
});
Solution 2
You can use this:
document.getElementById("others_text").value='';
to clear the input field.
Solution 3
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.
Solution 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('');
}
});
});
Solution 5
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:
spotlightsnap
Updated on June 14, 2022Comments
-
spotlightsnap almost 2 years
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 toEletronics
orComputers
, 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/
-
sp00m about 12 yearsAh sorry, my fault, I didn't know that was forbidden. Just edited my answer, I did it a more common way :)
-
spotlightsnap about 12 yearsthe problem is, when i submitting the form with POST, i only get the blank value. I choose "Others" there's input text inside text field though. :( . Is there any other way to clear the text?
-
spotlightsnap about 12 yearsthe problem is, when i submitting the form with POST, i only get the blank value. I choose "Others" there's input text inside text field though. :( . Is there any other way to clear the text?
-
spotlightsnap about 12 yearsWhen I submit the result through POST, result for Others text box is always blank :( .. any idea why ? If i remove the js code which is this ($('#others-text').val('');), data are submitted correctly, not blank data anymore. Any ways around for the solution ?
-
spotlightsnap about 12 yearsWhen I submit the result through POST, result for Others text box is always blank :( .. any idea why ? If i remove the js code which is find('input:text').val('');, data are submitted correctly, not blank data anymore. Any ways around for the solution ?
-
Chinmaya003 about 12 yearsi have updated JSFiddle.See this link if it can help u: jsfiddle.net/dnGKM/5
-
sp00m about 12 yearsThe name of the text-box is
others-text
, so you have to use$_GET['others-text']
(PHP) orrequest.getParameter("others-text")
(JAVA). Is that what you did?