Fadli Saad
Fadli Saad

Reputation: 222

Checkbox uncheck when submit form

I am not sure is this a bugs in jQuery when using .click() function instead of .change() function for checkbox. It's working well on jsfiddle 1: http://jsfiddle.net/fadlisaad/tSgbZ/16/ but not on the live page http://webcollect.viewscast.com/canonrepairmobile

You may test it with this sequence:

  1. Language > English
  2. Country > United Kingdom
  3. Click 'Continue'
  4. Choose any option and click 'Continue' for the next 3 question until you found question 'Prior to having your product repaired which steps did you take to try and resolve the problem?'
  5. try to choose the last option 'None of the above' and click continue. During the loading to the next question, the checked option is mysteriously unchecked itself, so if you view the source on the next page, you will find <INPUT TYPE="Hidden" ID="__OUTP__ResolveWay_7" NAME="__OUTP__ResolveWay_7" VALUE=""> which should be <INPUT TYPE="Hidden" ID="__OUTP__ResolveWay_7" NAME="__OUTP__ResolveWay_7" VALUE="1">

    It's just working fine with the others checkboxes. Could someone figure it out why?

Upvotes: 4

Views: 2993

Answers (4)

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

check this:

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

when you click on any input except ResolveWay_7 it clears checked property of it (Resolveway_7) and submit button (continue) is also an input so clicking it clears checkbox. You need to exclude button from selection like:

$('input[name!="ResolveWay_7"]').not("input.myButton").click(.......);

Upvotes: 1

Sir Crispalot
Sir Crispalot

Reputation: 4844

The problem is this piece of code:

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

Your Continue button is also going to satisfy that jQuery selector as it is of type <input> and is not called ResolveWay_7. Therefore when the Continue button is clicked, it will deselect the checkbox.

Upvotes: 3

deviousdodo
deviousdodo

Reputation: 9172

With this code:

$('input[name!="ResolveWay_7"]').click(function() {
    $('input[name="ResolveWay_7"]').removeAttr('checked');
});

you make it so that each time there's a click on an input, the checkbox is deactivated. So when you click on the submit button (yes, that's also an input) it unchecks the checkbox.

I believe you only need to change the selector to $('input[type="checkbox"][name!="ResolveWay_7"]') and it should work.

Upvotes: 3

James
James

Reputation: 11

Look at the bottom of the source code of the page where you select "None of the above".

<script type="text/javascript"> 
/* <![CDATA[ */
$(document).ready(function() {
    $('#comment').hide();
    $('#specify').click(function() {
        $('#comment').toggle();
        $('textarea').val('');
    });
    $('input[name="ResolveWay_7"]').change(function() {
        $('input[name!="ResolveWay_7"]').removeAttr('checked');
        $('textarea').val('');
        $('#comment').hide();
    });
    $('input[name!="ResolveWay_7"]').click(function() {
        $('input[name="ResolveWay_7"]').removeAttr('checked');
    });
});
/* ]]> */
</script>

There are 2 places there where it says:

$('input[name="ResolveWay_7"]').removeAttr('checked');

Upvotes: 1

Related Questions