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

admin管理员组

文章数量:1278653

Currently I have this radio buttons

1. Eletronics
2. Computers
3. 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: /

Currently I have this radio buttons

1. Eletronics
2. Computers
3. 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/dnGKM/

• javascript
• jquery
• forms
• input
• radio-button

Share Improve this question Follow edited Apr 24, 2012 at 12:51 Teun Zengerink 4,39355 gold badges3232 silver badges3232 bronze badges asked Apr 24, 2012 at 9:42 spotlightsnapspotlightsnap 1,11377 gold badges2121 silver badges2626 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

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("puters").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/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="puters">Computers</label>
<input type="radio" id="puters" 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('');

本文标签： javascriptHow to clear text inside text field when radio button is selectStack Overflow