Support » Plugins » Hacks » Passing multiple checkbox values to the Settings API using AJAX

  • I’m trying to pass multiple checkbox values to the DB using the settings API and AJAX. My setup works with PHP but something is wrong with my JS.

    Here is my HTML form; basically 4 checkboxes

    <input name="wpbackitup[wp_backitup_settings_db]" id="wp-backitup-settings-db" type="checkbox" value="1" <?php checked('1', $options['wp_backitup_settings_db']); ?> />
    <input name="wpbackitup[wp_backitup_settings_plugins]" id="wp-backitup-settings-plugins" type="checkbox" value="1" <?php checked('1', $options['wp_backitup_settings_plugins']); ?> />
    <input name="wpbackitup[wp_backitup_settings_themes]" id="wp-backitup-settings-themes" type="checkbox" value="1" <?php checked('1', $options['wp_backitup_settings_themes']); ?> />
    <input name="wpbackitup[wp_backitup_settings_uploads]" id="wp-backitup-settings-uploads" type="checkbox" value="1" <?php checked('1', $options['wp_backitup_settings_uploads']); ?> />

    and my JS:

    `$(“#wp-backitup-options input”).change( function() {
    $.post( ‘options.php’, {
    ‘wpbackitup[wp_backitup_settings_db]’ : $(‘#wp-backitup-settings-db’).val(),
    ‘wpbackitup[wp_backitup_settings_plugins]’ : $(‘#wp-backitup-settings-plugins’).val(),
    ‘wpbackitup[wp_backitup_settings_themes]’ : $(‘#wp-backitup-settings-themes’).val(),
    ‘wpbackitup[wp_backitup_settings_uploads]’ : $(‘#wp-backitup-settings-uploads’).val(),
    } ).error( function() {
    }).success( function() {
    return false;

    As it stands, it displays error and does not update the DB

Viewing 6 replies - 1 through 6 (of 6 total)
  • I’m not overly skilled with JS or AJAX, but I’m not sure your ajax call is structured properly. You have to pass along a data array which contains the callback function, and I don’t see that listed in your code (which may explain why an error is returned, but no changes are saved). I’ve never used AJAX in the Settings API capacity, though, so take that with a grain of salt.

    Have you reviewed the AJAX in Plugins documentation?

    Thanks Rebecca,

    I’m new to AJAX so it is almost certainly incorrect. I’m basing my code on this:

    In which the OP appears to serialize the entire form and post it to options.php.

    Just in case you haven’t resolved this yet, I’m going to guess off the cuff (comparing the two), you’re error is here

    $.post( 'options.php', {
    'wpbackitup[wp_backitup_settings_db]' : $('#wp-backitup-settings-db').val(),
    'wpbackitup[wp_backitup_settings_plugins]' : $('#wp-backitup-settings-plugins').val(),
    'wpbackitup[wp_backitup_settings_themes]' : $('#wp-backitup-settings-themes').val(),
    'wpbackitup[wp_backitup_settings_uploads]' : $('#wp-backitup-settings-uploads').val(),
    } ).error( function() {

    It should be (for a standard admin ajax call)

    var data = {
     action: // the php function to execute,
     key1: value1,
     key2: value2,
     etc: etc
    $.post(ajaxurl, data, function(response) {
       // whatever you're doing with the response

    ajaxurl is universally available, so I’m fairly positive you shouldn’t be putting ‘options.php’ in that argument. I’d suggest var_dumping the data provided in the PHP function that is called to see what’s showing up and what you’re working with.

    Thanks Rebecca,

    If you take a look at what I’m trying to do though you’ll see that the OP on Stack Overflow was trying to do the same thing and update the DB via the Settings API using AJAX.

    Yeah, I took a look over there and it seemed a bit clunky (IMO).

    I think you’d probably be better off just using update_option (the old fashioned way) for the AJAX call. But, I understand needing to do something just because so a couple more questions

    A) Have you properly declared your settings? What’s the code for that?
    B) Without the AJAX, does it work right as a straight up form via the API?
    C) Why aren’t you serializing them the same way as the successful function on StackOverflow?

    I couldn’t get this to work in the end but I just kept it as a PHP form and it works fine; refreshing the page and submitting the values to the DB takes less than a second.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Passing multiple checkbox values to the Settings API using AJAX’ is closed to new replies.