Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have a check box that will if checked send a gift as a monthly gift. If check box is unchecked the gift is a single gift.

What I have:

<div id="monthly-right">
    <input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length"></div>

What I need to display if checked:

<div id="monthly-right"><input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length">
    <input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" />
    <input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />
</div>

And back if unchecked

share|improve this question
So do you actually want to see the inputs, or just add the hidden inputs that the user won't see? – Jeff B May 2 '12 at 16:45
Do you really want the radio button to change into a checkbox? – Jeff B May 2 '12 at 16:58
Just add the hidden inputs that the user will not see – TikaL13 May 2 '12 at 17:20
@Matthew so basically you need this jsfiddle.net/vKLWA/2 – Nicola Peluchetti May 2 '12 at 17:54
Correct, Thanks! – TikaL13 May 2 '12 at 17:56

5 Answers

up vote 3 down vote accepted

I would do

$('#check').click(function() {
    var type = $(this).is(':checked') ? "checkbox" : "radio";
    var input_r_or_c = $('<input />', {
        type: type,
        name: "level_autorepeat",
        id: "level_autorepeat",
        value: "false"
    });
    if ($(this).is(':checked')) {
        var input1 = $('<input />', {
            type: "hidden",
            name: "sustaining.frequency",
            id: "sustaining_frequency",
            value: "monthly"
        });
        var input2 = $('<input />', {
            type: "hidden",
            name: "sustaining.duration",
            id: "sustaining_duration",
            value: "0"
        });
        $('#donation-length').append(input1).append(input2);
    } else {
        $('#donation-length').empty();
    }
    $('#monthly-right input').replaceWith(input_r_or_c);
});

http://jsfiddle.net/vKLWA/1/

share|improve this answer
He's got to have a typo in his question, right? What is the usage model for having two checkbox/radio buttons to make this work, and why would one change? Your answer does exactly what his html suggests, but it just seems... bizarre. – Jeff B May 2 '12 at 17:00
@JeffB yes it's bizarre, but that's what he asked. If he intended another thing i will change my code :) – Nicola Peluchetti May 2 '12 at 17:03
I understand. I am not criticizing your answer, just wondering aloud to a fellow answer-er. – Jeff B May 2 '12 at 17:04
There was a typo guys, sorry about that. – TikaL13 May 2 '12 at 17:19
up vote 1 down vote

If these are hidden inputs, I would do this on the server side. Otherwise, if javascript is disabled, the user will have no idea that the checkbox is not doing anything and may inadvertently make a single or reoccurring contribution.

Hiding and showing hidden inputs will not affect whether they are sent to the server on submit anyway. You will need to actually delete them from the DOM, or move them outside of your current form.

So basically, always send the hidden inputs, but on the server side, ignore the frequency/duration unless the checkbox value is set.

If you still want to do it with javascript anyway, you would need to do this:

var freq = '<input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /><input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />';

$('#monthly-right').on('change', '#level_autorepeat', function() {
   if($(this).is(':checked')) {
       $('#level_autorepeat').html(freq);
   } else {
       $('#level_autorepeat').html("");
   }
}

The other answers show you how to check if a checkbox is checked, but you really need to watch for when it changes using an onchange handler, which is done via .on(). I attach the handler to the parent, and watch when the checkbox changes. If the checkbox is checked, I add the frequency/duration code (stored in a variable) into the div, otherwise I clear the HTML in the div. You could do this a number of ways, including keeping the contents in another div outside of your form, and moving/copying the contents into the div.

share|improve this answer
Thank you for the explanation. I understand totally regarding ths being done on the server side, unfortunately this has to be done on the client side so the user must have JavaScript enabled. I am going to try this and see if this works for me. Thanks again! – TikaL13 May 2 '12 at 17:24
up vote 0 down vote

This is how you can check if your checkbox is 'checked' using jquery:

$('#your_checkbox_id').is(':checked');
share|improve this answer
How would it check if it's unchecked? I would like to say if checked show these if unchcked do not add these hidden inputs to form – TikaL13 May 2 '12 at 17:19
up vote 0 down vote

Try this

$('#checkBox').attr('checked');

(or)

$('#checkBox').prop('checked');

share|improve this answer
up vote 0 down vote

you can use 

 $('#donation-length').hide();
 if ($('#level_autorepeat').is(':checked')){
     $('#donation-length').show();
 }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.