Modify attributes attributes when inputs are checked with if else statements

Question

I have a set of radio buttons, a text field, a checkbox, and a hidden text field.

<input type="radio" name="amount-value" value="33">   $ 33   <br>
<input type="radio" name="amount-value" value="50">   $ 50   <br>
<input type="radio" name="amount-value" value="100">  $ 100  <br>
<input type="radio" name="amount-value" value="250">  $ 250  <br>
<input type="radio" name="amount-value" value="500">  $ 500  <br>
<input type="radio" name="amount-value" value="1000"> $ 1000 <br>
<input type="radio" name="amount-value" value="3333"> $ 3,333<br>
<input type="radio" name="amount-value" value="5000"> $ 5,000<br>
<input type="radio" name="amount-value" value="0" id="other-amount">                
  $ <input type="text" name="" id="other-amount-val" disabled="disabled">

<p><input type="checkbox" id="rainforest_guardian">I'd like to become a Rainforest Guardian by making this an ongoing monthly gift.</p>         

<input id="donation_amount" name="amount" value="" type="hidden" >

When the last radio button, #other-amount, is selected, I want to enable #other-amount-val text field.

If the #rainforest-guardian checkbox is checked, I'd like to change the name attribute of #donation_amount to "a3".

This is the JS I'm trying to use to do this, but cannot work out what I'm doing wrong. Web Inspector is giving me "undefined is not a function" on the if statements.

<script>

$(document).ready(function() {


    // Enable Amount input box if radio button is selected

    $('#other-amount').change(function() {
      if (('#other-amount').prop('checked', true)) {
        $('#other-amount-val').prop('disabled', false);
      } else {
        $('#other-amount-val').prop('disabled', true );
      }
    });

    // Change name attribute value if checkbox is selected

   $('#rainforest_guardian').click(function() {
      if (('#rainforest_guardian').is(':checked')) {
        $('#donation_amount').prop('name', "a3");
      } else {
        $('#donation_amount').prop('name', "amount" );
      }
    });

</script>

I have seen several related posts on StackExchange and tried different things, e.g. click() vs. change() as shown above.

Please tell me what I'm doing wrong. Thanks in advance.

your .ready isn't closed

r043v
– r043v

2013-08-06 22:08:01 +00:00
Commented Aug 6, 2013 at 22:08 — r043v
– r043v, Commented Aug 6, 2013 at 22:08

Sergio · Accepted Answer · 2013-08-06 22:14:26Z

1

You forgot a $ on some if statements and missed the end tags });

if (('#other-amount').prop('checked', true)) {

should be

if ($('#other-amount').prop('checked', true)) {
    ^

Try this:

DEMO HERE

$(document).ready(function () {
    // Enable Amount input box if radio button is selected
    $('#other-amount').change(function () {
        if ($('#other-amount').prop('checked', true)) {
            $('#other-amount-val').prop('disabled', false);
        } else {
            $('#other-amount-val').prop('disabled', true);
        }
    });
    // Change name attribute value if checkbox is selected
    $('#rainforest_guardian').click(function () {
        if ($('#rainforest_guardian').is(':checked')) {
            $('#donation_amount').prop('name', "a3");
        } else {
            $('#donation_amount').prop('name', "amount");
        }
    });
});

edited Aug 6, 2013 at 22:14

answered Aug 6, 2013 at 22:08

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

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

2 Comments

Rhecil Codes Over a year ago

Ah. Silly mistake. Thank you Sergio and @Musa. The errors are sorted, but the second function isn't changing the name attribute on the input. Can you tell why?

Rhecil Codes Over a year ago

Ah. It is on Fiddle. Just not in my local environment. Thank you for your help.

Musa · Accepted Answer · 2013-08-06 22:08:56Z

0

 ('#other-amount').prop('checked', true)

should be

$('#other-amount').prop('checked')

and

('#rainforest_guardian').is(':checked')

should be

$('#rainforest_guardian').is(':checked')

answered Aug 6, 2013 at 22:08

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

Modify attributes attributes when inputs are checked with if else statements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related