WordPress.org

Ready to get started?Download WordPress

Forums

Passing multiple checkbox values to the Settings API using AJAX (7 posts)

  1. John Peden
    Member
    Posted 1 year ago #

    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() {
    $("#wp-backitup-settings-status").html('Updated');
    }).success( function() {
    $("#wp-backitup-settings-status").html('Error');
    });
    return false;
    });`

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

  2. Rebecca Schaefer
    Member
    Posted 1 year ago #

    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?

  3. John Peden
    Member
    Posted 1 year ago #

    Thanks Rebecca,

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

    http://stackoverflow.com/questions/10873537/saving-wordpress-settings-api-options-with-ajax

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

  4. Rebecca Schaefer
    Member
    Posted 1 year ago #

    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.

  5. John Peden
    Member
    Posted 1 year ago #

    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.

  6. Rebecca Schaefer
    Member
    Posted 1 year ago #

    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?

  7. John Peden
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic