Clearing a textbox field when a radio button is selected in Javascript

Question

I have a web form which allows users to donate money using the predefined radio buttons with a value assigned to them (all different numbers). I also have a choose your own amount textfield which they can write in a custom amount they wish to donate. I want to clear the custom textfield if a user selects a predefined choice.

So far I have created this:

HTML:

<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

JAVASCRIPT:

$('input[name="am_payment"]').on('click', function() {
   if ($(this).val() === '') {
      $('#theamount').removeProp("disabled");
   }
   else {
      $('#theamount').prop("disabled", "disabled");
      $('input[name="CP_otheramount"]').val("");
   }
});

But basing it on a value === true for value="" just doesn't seem right.

Is there a way to improve this?

Thanks

To enable disable the field use $('#theamount').prop("disabled", true/false); — Arun P Johny
– Arun P Johny, Commented Jan 21, 2016 at 5:44

Arun P Johny · Accepted Answer · 2016-01-21 05:48:13Z

2

To disable/enable an element you need to set the value of the disabled property to true/false, removing the property doesn't work so you need

$('input[name="am_payment"]').on('click', function() {
  if ($(this).val() === '') {
    $('#theamount').prop('disabled', false);
  } else {
    $('#theamount').prop("disabled", true).val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>

<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>

<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>

<input type="radio" value="" name="am_payment">
<label>Other</label>

<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled" />

answered Jan 21, 2016 at 5:48

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stef Over a year ago

That works OK, the problem is that it forces users to use the radio buttons to select a choice. What if the user wants to just press the textbox to enter something too?

Guruprasad J Rao · Accepted Answer · 2016-01-22 03:38:15Z

0

Use removeAttr instead of removeProp and I have modified your code to accept amounts on textbox based on radio button selected

$('input[name="am_payment"]').on('click', function() {
   if ($(this).val() === '') {
     $('input[name="CP_otheramount"]').val('');
      $('#theamount').removeAttr("disabled");
   }
   else {
      $('#theamount').prop("disabled", "disabled");
      $('input[name="CP_otheramount"]').val($(this).val());
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

Update

From your comments I hope you are expecting below functionality.

$('#theamount').on('focus', function() {
  $("input:radio").prop("checked",false);
  $("input[value='']").prop("checked",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

edited Jan 22, 2016 at 3:38

answered Jan 21, 2016 at 5:47

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

2 Comments

mhodges Over a year ago

jQuery specification recommends using .prop("disabled", true/false) instead of adding and removing the property or attribute

stef Over a year ago

This works quite nicely, one UX problem i have just noticed though. Rather than the textbox be disabled on startup, how about if the user presses inside the textbox the radio button next to it is selected? I would generally press the textbox rather than the radio button if i was going to enter an amount but if its disabled people might think its not working.

Collectives™ on Stack Overflow

Clearing a textbox field when a radio button is selected in Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related