Question

Ok thanks to the guys on here we have sorted functions for checkbox click, and are now using unobtrusive js.

What I want to achieve is..

We have a form, and on submit with checkbox unclicked, the form submits as it would normally…

But.. I have added an option to click checkbox, and display hidden content .. which I want to be part of same form, but with additional values etc..

Essentially…

if checkbox is unchecked, show standard submit button.

if checkbox is clicked, hide standard button and toggle additional form elements and new submit button.

The issue I am facing is :

1. passing a numeric value onclick from the checkbox, so need set to 1 or 0
   0 being standard do nothing
   1 hiding submit button, and toggling hidden additional form fields.

I can get the toggle working, but onclick of the checkbox it doesnt do anything.

I am also baffled as to hide the submit button ( normally displayed ) if checkbox is clicked.

script for hidden element:

$('.styledCheckbox').change(function() {
    if ($(this).val() != "0") {
    $('.extraForm').show('fast');
    }else if ($(this).val() == "0") {
    $('.extraForm').hide('fast');
}

});

script for the checkbox:

 $(function(){
  $('.styledCheckbox').click(function(){
    setCheckboxDisplay(this);
  });
});

html for the checkbox:

<input name="include" type="checkbox" id="checkbox"  class="styledCheckbox" />

hidden div

<div class="extraForm" style="display:none;">
                                        <!--extra form elements and submit button here-->
                                    </div>

Oh and would idealy like form to have dynamic action based on event handler, so if standard form submit.. do something, if checkbox selected , form submit … do something else

Also looking to change form action based on CHECKBOX selection ?

so something like …

changeAction(url) {
document.this_form.action = “clicked.php”;
}

< form method=”POST” name=”this_form” action=”unclicked.php”>

Answer 1

I think it is not working because you don’t have a value set for your checkbox. Also, it is better to the jQuery is(":checked") function to check if the checkbox is checked:

JS:

$('.styledCheckbox').change(function() {
    if ($(this).is(":checked")) {
        $('.extraForm').show('fast');
    } else {
        $('.extraForm').hide('fast');
    }
});

HTML:

<input name="include" type="checkbox" id="checkbox" value="yes" class="styledCheckbox" />

Ad@m