Question

I made a method for my UI class that clears inputs in a containing div.

The problem is, once it is called, The checkboxes never get set through AJAX calls until you refresh the page. The example below is for my group/user management. If you click on a group to edit, a jQuery UI dialog pops up with the attributes and permissions of that group. If you cancel, and try to add a new one, the inputs are cleared. If you then goto edit a group after that, the inputs are not updated.

Edit: It seems the checkboxes stop working if the cancel button is clicked regardless if my clearInputs method is called or not.

Here is the method of the UI class:

clearInputs: function(container) {

    $(container + " :input").val("");
    $(container).find('input[type=checkbox]:checked').prop('checked', false);
}

And an example of the calling code (copied from my project, but I cut some of the fat out…

/* The user clicks the edit group button... */
$(document).delegate('.group_edit', 'click', function() {
    var groupId = $(this).attr('id').replace("group_edit_", "");

    // This call to the clearInputs method is commented out,
    // and behaves as I described above.    
// ui.clearInputs("#dialogGroup");

$.ajax({
    type: "POST",
        url: "ajax.users.php",
    data: {
        action: "get_privs",
        group: groupId
    },
    success: function (result) {
        if (result.success == true) {
        // Set the name value
        $("#name").val(result.GroupName);

        // Update each of the checkboxes
        $.each(result.privs, function(priv, grant) {
            grant = Boolean(parseInt(grant));
        $('#dialogGroup input[value=' + priv + ']').prop('checked', grant);
        });

        /* Create the dialog */
        $("#dialogGroup").dialog({
        buttons: {
        "OK" : function () {
            $(this).dialog("close");

            var form_data = new Array();

                        $.each($("input[@name='cbox[]']:checked"), function() {
                form_data.push($(this).val());
            });

            $.ajax({
                            /* Saves the form data */

            });
        },
        "Cancel": function() {
            ui.clearInputs("#dialogGroup");
        $(this).dialog("close");
        }
}
});

And finally to add a group:

$(document).delegate('#group_add', 'click', function() {
var dialog = "#dialogGroup";

// ui.clearInputs(dialog);

$(dialog).dialog({
    modal: true,
    title: "Create Group",
    buttons: {
        "OK": function() {
        $(this).dialog("close");
        $("#dialogNotify").html("Saving...");
        $("#dialogNotify").dialog('open');
        var form_data = new Array();

                $.each($("input[@name='cbox[]']:checked"), function() {
            form_data.push($(this).val());
        });


        $.ajax({
                    /* Save the form data */
        });

},
Cancel: function() {
    $(this).dialog("close");
}
}
});


});

I hope I included everything… If not I will update.

Answer 1

try this:

$( document ).ready(function()
{
    var search_on = $('#formX');

    $( search_on )

    //CHANGE "input" for "input,select" to search all fields
    .find('input')

    .each(function( e )
    {
        if( $(this).attr('type') == 'radio' || $(this).attr('type') == 'checkbox' )
        {
            $(this).attr('checked',false);
            //USE RESET() IF IS A FORM FIELD
            $(this).reset();
        }

        //IF IS A DROPDOWN
        /*
        else if( $(this).attr('type') == undefined )
        {
            $(this).find('option').attr('selected',false);
        }
        */

        else
        {
            $(this).val('');
            //USE RESET() IF IS A FORM FIELD
            //$(this).reset();
        }

    });
});

Or use this function( if is a form ):

jQuery.fn.reset = function () {
  $(this).each (function() { this.reset(); });
}

And Call

$('#formX').reset();