Gaétan Martin Gaétan Martin - 5 months ago 23
HTML Question

Check/Uncheck radio on filling textbox

I've got this little piece of code here I've been working on for a while, and for some reason it doesn't work. Can somebody have a look at it and tell me whats wrong with it?

All I need it to do is to check the "Other amount" radio box when someone enters an amount in the textbox. I'd also like to clear the amount written when any other radios are checked. Cross browser is a must.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donation amount</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript">
$("#donationAmountMan").on("input propertychange change paste keyup", function() {
if ($("#donationAmountMan").val().length > 0) {
$("#da_man").prop("checked", true);
} else {
$("#da_man").prop("checked", false);
}
});
</script>

</head>
<body>
<label>Donation amount</label>
<div>
<label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label>
<label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label>
<label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label>
<label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label>
<label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount
<input type='text' name='donationAmountMan' id='donationAmountMan'>$</label>
</div>
</body>
</html>


Thank you all for your precious help!

Answer

This should do it for you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Donation amount</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>


    </head>
    <body>
            <label>Donation amount</label>
            <div>
                <form class="myForm">
                    <label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label>
                    <label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label>
                    <label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label>
                    <label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label>
                    <label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount 
                    <input type='text' name='donationAmountMan' id='donationAmountMan'>$</label>
                </form>
            </div>

            <script type="text/javascript">

            $(document).ready(function(){
                 $("#donationAmountMan").on("change", function() {
                    if ($("#donationAmountMan").val().length > 0) {
                            $(".myForm input[type=radio]").each( function( index, value ) {
                                $(this).prop("checked", false);
                            });
                            $("#da_man").prop("checked", true);
                    }
                });
                $(".myForm input[type=radio]").on("click", function() {
                    if ($(this).val() != "0") {
                        $('#donationAmountMan').val('');
                    }
                });  
            });

            </script>

    </body>
    </html>

What I did:

  • Included jQuery instead of jQuery UI
  • Added a DOM-ready handler
  • Used proper selectors
  • Looped through the radios using an 'each'