adding Reset button to reset checkboxes using PHP or javascript

Question

I need assistance in figure out the method to provide a button to reset these checkboxes.

UPDATEL: I have more information to share:

The answers provided will only work with checkboxes that are selected with that instance and not checkboxes that are enabled onLoad. This is a perferences page were people can choose genre's they like and save them.

<div class="grid_13">
<form method="post" id="updatePreferedGenres" action="/account/update/preferences/genres">
    <h2 class="alt blue no-margin-top margin-bottom">Check off genres you like:</h2>

    <?php

    $this->load->library('GenreLib');
    $genreArray = $this->genrelib->getGenreList();

    foreach ($genreArray as $parentID => $genreSegment){

        $isChecked = "";

        if (isset($customerPrefs['genres']) && is_array($customerPrefs['genres']) && sizeof($customerPrefs['genres']) > 0 && in_array($parentID, array_keys($customerPrefs['genres']))) {
            $isChecked = "CHECKED";
        }

        echo '<p class="grid_3 no-margins-left no-margins-right"><input type="checkbox" class="margin-right" name="' . $genreSegment['parentGenreName'] . '" value="' . $parentID . '"' . $isChecked . '/>' . $genreSegment['parentGenreName'] . '</p>';

    }

    ?>

    <div class="clear"></div>
    <input type="button" class="button right" value="Save" />
    <div class="clear"></div>
</form>

// Rig the preferences form
$("#updateDHOverride").submit(function(event) {
    event.preventDefault();
    if ( $(this).find("#downloadHubOverride").is(':checked')){
        document.cookie = 'downloadHubOverride=TRUE; expires=Thursday, 25-Jul-2030 23:59:59 GMT; path=/';
    }
    else {
        document.cookie = 'downloadHubOverride=FALSE; expires=Thursday, 25-Jul-2030 23:59:59 GMT; path=/';
    }
});


// Rig the submit for genre preferences form
$("#updatePreferedGenres").each(function() {

    var linkedForm = $(this);

    $(this).find("#prefSave").click( function(event) {

        event.preventDefault();

        var getGenreIds = "";

        linkedForm.find("input[type=checkbox]").each( function() {
            if ( $(this).is(":checked") ) {
                if ( getGenreIds.length > 0) {
                    getGenreIds += ',' + $(this).attr('value');
                }
                else {
                    getGenreIds += $(this).attr('value');
                }
            }
        });

        $.post(
            linkedForm.attr('action'),
            { genreIds : getGenreIds },
            function (status) {

                status = $.parseJSON(status);

                if ( status.status == "success" ) {
                    $.prompt('<h4>Preferences updated successfully!</h4>', {
                        top: '34%',
                        zIndex: '10000'
                    });

                    if ( linkedForm.hasClass('goHome') ) window.location = "/";
                }
                else {
                    $.prompt('<h4>' +  status.message + '</h4>', {
                        top: '34%',
                        zIndex: '10000'
                    });
                }
            }
        );

    });

});

// REMOVE checkboxes Script - need to place into onClick Function
//  $('input:checkbox').removeAttr('checked');

$('#activateAccount').submit( function(event) {

    event.preventDefault();

    // update form update action
    $.post(
        $(this).attr('action'),
        $(this).serialize(),
        function (status) {

            //console.log(status);

            status = $.parseJSON(status);

            if ( status.status == "success" ) {
                $.prompt('<h4>Account updated successfully!</h4>', {
                    top: '34%',
                    zIndex: '10000',
                    buttons: { OK:true },
                    submit: function(v,m,f){
                        location.reload(true);
                    }
                });
            }
            else {
                if ( status.data != "" ) {
                    //if there are form validation errors
                    displayValidation(status.data);
                }
                else {
                    //generic error message
                    $.prompt('<h4>' +  status.message + '</h4>', {
                        top: '34%',
                        zIndex: '10000'
                    });
                }
            }
        }
    );
});

I have a basic Idea of what needs to happen, I'm just not sure on the syntax.

Do you want to uncheck all checkbox or reset them to original values? — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Feb 27, 2012 at 21:03
adding another input button with the type of reset doesn't appear to work - its treating it as a submit button. — TrevorD
– TrevorD, Commented Feb 27, 2012 at 23:34

Charles Forest · Accepted Answer · 2012-02-27 21:00:52Z

1

since you seem to only have checkboxes :

<input type='reset' value='resetButton'>

answered Feb 27, 2012 at 21:00

Charles Forest

1,0451 gold badge13 silver badges30 bronze badges

I attempted this but the "successful save" alert still pops up as if its treating the reset button as a save button.

TrevorD
– TrevorD

02/27/2012 23:11:34
Commented Feb 27, 2012 at 23:11
shouldn't your submit be a type="submit". then you don't need to say to your button to submit, wich will avoid problems like this.

Charles Forest
– Charles Forest

02/28/2012 15:26:59
Commented Feb 28, 2012 at 15:26

Add a comment |

knittl · Accepted Answer · 2012-02-27 21:01:32Z

1

No need for PHP, nor Javascript:

<input type="reset" value="Reset checkboxes" />

answered Feb 27, 2012 at 21:01

knittl

268k59 gold badges339 silver badges402 bronze badges

Add a comment |

Collectives™ on Stack Overflow

adding Reset button to reset checkboxes using PHP or javascript

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related