Assigning value to checkbox?

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 :

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">

kirb · Accepted Answer · 2011-06-18 03:08:00Z

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

answered Jun 18, 2011 at 3:08

kirb

2,0391 gold badge19 silver badges28 bronze badges

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

8 Comments

422 Over a year ago

Ok great that works. Is it possible to change the form action ? any suggestions .. thanks

Mark Eirich Over a year ago

You could also simply check if (this.checked) {... the performance would be better. No need to wrap jQuery around the object just to find out whether it's checked or not.

422 Over a year ago

Would it be like: see amended question

Mark Eirich Over a year ago

You can change the form action with jQuery('#formid').attr('action', '/new/action/here') (replace formid with the ID of the form)

kirb Over a year ago

Also, I will explain how the code works: first it checks if the checkbox has the :checked filter, meaning that it is checked, and if it is, show the extra part of the form, otherwise, hide it. Ad@m

|

Chandu · Accepted Answer · 2011-06-18 03:08:00Z

1

I assume you are trying to toggle the form based on the checked status if the checkbox. If that's the case try:

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

answered Jun 18, 2011 at 3:08

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

1 Comment

422 Over a year ago

Thanks looks like Great Minds think Alike

Collectives™ on Stack Overflow

Assigning value to checkbox?

2 Answers 2

8 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Related