Check/Uncheck radio on filling textbox

Question

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!

[You are not waiting the document to be ready](https://learn.jquery.com/using-jquery-core/document-ready/) — Karl-André Gagnon, Jun 13 '16 at 17:09
Console says : ReferenceError: jQuery is not defined jquery-ui.min.js:6:52 ReferenceError: $ is not defined — Gaétan Martin, Jun 13 '16 at 17:16
You haven't included jQuery. You need to first include jQuery, then jQuery UI. TBH I'm not sure why you even need jQuery UI here. Then you need to either move the jQuery you wrote to the end of the body or wrap it in a document ready call. — j08691, Jun 13 '16 at 17:23
Added prior to UI, no change but console now doesn't show anything! — Gaétan Martin, Jun 13 '16 at 17:28
Yep, that's all it was! Thank you j08691. Merci Karl-André, j'avais pas allumé la-dessus! — Gaétan Martin, Jun 13 '16 at 17:38

score 0 · Accepted Answer · edited May 23 '17 at 10:34

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) {
                            $("#da_man").prop("checked", true);
                        }
                    });
                    $(".myForm input[type=radio]").on("click", function() {
                        if ($(this).val() != "0") {
                            $('#donationAmountMan').val('');
                        }
                    });  
                });

            </script>

    </body>
    </html>

What I did:

Moved the JS code to a script tag at the end of the page's body
Included jQuery instead of jQuery UI
Added a DOM-ready handler
Used proper selectors

jQuery and jQuery UI are different libraries. jQuery UI is specifically for introducing a set of UI widgets, none of which you are using in this page. jQuery UI uses jQuery as a dependency, by the way, so if you do use it, you should load jQuery beforehand. But that's not necessary in your example.

I moved the JS code to the end of page's BODY element. This is fine (I think) in a very small example like yours. I should note that it's not really good form for most sites particularly if they are large and complex. There's a good discussion about that here: https://stackoverflow.com/a/24070373/6441528

The DOM-ready handler ($(document).ready) in this case (based on the way I structured it) insures that the DOM elements that you're manipulating are loaded to the DOM before you do things like try to add event handlers to them.

EDIT

I edited this because though my initial answer worked it really wasn't the best way to handle it. Since the radios are all in the same set, there was no need to loop through them. Just selecting the 'other' radio will obviously deselect the others. I also wanted to add more explanation so that you'd know why I did what I did.

score 0 · Answer 2 · answered Jun 13 '16 at 17:39

0

Move the jquery code to the end of the body or wrap in up in a document ready call!

answered Jun 13 '16 at 17:39

Gaétan Martin

51
6

Check/Uncheck radio on filling textbox

2 Answers2