选择任何其他单选按钮时清除文本框

Question

I started working on some code for a webpage yesterday & i am having trouble getting a few things working.

I have 4 radio buttons, 3 of which have values applied to them & one which allows the user to enter a custom amount with a textfield next to it eg

[] = 3

[] = 11

[] = 32

[] = [_________] = Enter Custom Amount

The problem is, if a user selects custom amount by pressing the radio button and enters 300 eg, then afterwards decides to choose a predefined amount of 11 they can still submit which will enter both values.

So what I done was write some of this code below to CLEAR the textbox if a predefined radio button is selected.

The problem I have now is that say the page loads and the user instantly wants to enter a custom amount, 9 times out of 10 they are more than likely to PRESS or click inside the textfield rather than use the radio button next to it but because I have disabled it on startup i don't know what the best way to resolve this UX problem. Can anyone give help? Here's what I have so far:

  <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"/>

$('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('');
   }
});

Answer 1

About this?

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

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

Answer 2

I guess what you want is that when someone click on the text input the radio event has to be triggered and the input has to be on focus

 function activate() { console.log('clicked'); $('#other').prop('checked', true); $('#other').trigger('click'); $('#theamount').focus(); } $('input[name="am_payment"]').on('click', function() { console.log('changed'); if ($(this).val() === '') { $('input[name="CP_otheramount"]').val(''); $('#theamount').removeAttr("disabled"); } else { $('#theamount').prop("disabled", "disabled"); $('input[name="CP_otheramount"]').val(''); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" id="other"> <label>Other</label> <span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>