CODEWITHSUNDEEP
javascriptphpjquery
user3168637
user3168637

Reputation: 121

Clear the radio button value when user types in a textbox using JavaScript

I am trying to clear the radio button value when the user types something on the textbox.

When the user selects the amount from radio button that value appears in the textbox and if the user wants to enter the different amount the radio button value has to get cleared.

How can I do it?

Here is the code:

 <input type="radio" name="a1" value="1000" <?php if ($a1 == '1000') { echo "checked"; } ?>><label>&#x20B9;1000</label><br/>

 <input type="radio" name="a1" value="2000" <?php if ($a1 == '2000') { echo "checked"; } ?> ><label>&#x20B9; 2000</label><br/>

 <input type="radio" name="a1" value="12000" <?php if ($a1 == '12000') { echo "checked"; } ?> ><label>&#x20B9;12000</label><br/>
 <input type="radio" name="a1" value="12000" <?php if ($a1 == '10000 ') { echo "checked"; } ?>><label>&#x20B9; 10000 -Skilling a person</label>

<script>
   $('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
   var value = $(this).val(); //Get the clicked checkbox value
   var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc) 

   $('[name="amount"]').val(value);

        });
 </script>



    <div>
       <label>My Contribution</label>
       <input type="text" name="amount" id="amount" value="<?php echo $amount; ?>"  placeholder="&#x20B9; Any Amount" required="">
    </div>

Upvotes: 1

Views: 125

Answers (8)

Hrishikesh
Hrishikesh

Reputation: 632

You could try something like this on the change event of the textbox

$('[name="amount"]').on('change',function(){
var radioValue = 0;

if($('input[type=radio]').is(':checked') == true)
{
  radioValue = $('input[type=radio]:checked').val();
}
if(radioValue !== $(this).val()){
  $('input[type=radio]').removeAttr('checked');
}

});

Upvotes: 0

Dmitry Sobolevsky
Dmitry Sobolevsky

Reputation: 1191

I think it's better and nice way :) without jquery)

    var selectVal;

    document.addEventListener('click',function(event){
      if(event.target.name === 'a1'){
        selectVal = event.target.value;
        document.querySelector('#amount').value = selectVal;
      }
    })

    document.addEventListener('input', function(event){
      if(event.target.name === 'amount' && event.target.value !== selectVal){
         var checkedRadio = document.querySelector('input[type="radio"]:checked');
          if(checkedRadio) {checkedRadio.checked = false;}
      }
    })

Upvotes: 0

Deepansh Sachdeva
Deepansh Sachdeva

Reputation: 1198

Here's a fiddle for the solution.

//to set input vaue from selected radio selection
$("input[name=amount]").change(function(){
	$('#amount').val($(this).val());
});

//to reset radio selection
$('#amount').keyup(function() {
	$("input[name=amount]").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="amount" type="radio" value="100"> 100
<input name="amount" type="radio" value="200"> 200
<input name="amount" type="radio" value="300"> 300
<input name="amount" type="radio" value="400"> 400
<br><br>
Amount: <input type="text" id="amount">

Upvotes: 0

Zai
Zai

Reputation: 1

Create a function in jquery , select($) input field and give it a property removeattr checked! .removeAttr('checked')

Upvotes: 0

PraveenKumar
PraveenKumar

Reputation: 1861

Hope this helps you.

$('input[type=radio]').click(function(e) {
  $('#amount').val($(this).val());
});

$('#amount').keyup(function(e) {
  $('input[type="radio"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="a1" value="1000">
<label>&#x20B9; 1000</label><br/>
<input type="radio" name="a1" value="2000">
<label>&#x20B9; 2000</label><br/>
<input type="radio" name="a1" value="12000">
<label>&#x20B9; 12000</label><br/>
<input type="radio" name="a1" value="12000">
<label>&#x20B9; 10000 -Skilling a person</label>
<div>
  <label>My Contribution</label>
  <input type="text" name="amount" id="amount" value=""  placeholder="&#x20B9; Any Amount" required="">
</div>

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

As you have not mentioned the jquery version so check the following:

In versions of jQuery before 1.6 use:

$('input[name="correctAnswer"]').attr('checked', false);

In versions of jQuery after 1.6 you should use:

$('input[name="correctAnswer"]').prop('checked', false);

Check the following example:

$(function(){
  $('#button').click(function(){
    $('input[type="radio"]').prop('checked', false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="radio" checked>Yes</label>
<label><input type="radio">No</label>

<input type="button" id="button" value="Clear">

Upvotes: 0

Lucas Borges
Lucas Borges

Reputation: 142

$('input[name=a1]').prop('checked',false);

Upvotes: 0

Puneeth Kumar
Puneeth Kumar

Reputation: 192

 <input type="text" name="amount" id="amount" value="<?php echo $amount; ?>"  placeholder="&#x20B9; Any Amount" required="" onClick="uncheckRadio();">

<script>
function uncheckRadio(){
   $('input[name="a1"]').removeAttr("checked");
}
</script>

Upvotes: 1

Related Questions