Question

I’m developing a WordPress plugin. There are multiple form elements, and for some reason, each time I click the submit button on one form, it tells another form to submit. This is inconvenient, because when I click the button to save new information, the other form deletes the first row from the database.

Javascript:

//This is the Javascript that controls the remove all form.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('tr.assoc_row').show();
        $('#settings-removed-msg').hide();
        $('#formdeleteassoc').submit(function(e){
            e.preventDefault(); //Works to prevent normal submission of the form.

            $.ajax ({
                type: 'POST',
                url: '',
                data: {remove_all: ''
                },
                success: function() {
                    $('#settings-removed-msg').fadeIn('fast'); //Working now
                    $('tr.assoc_row').fadeOut('fast'); //Working now
                    }
            });

        });
    });
</script>

HTML

<!-- This the the HTML and PHP that renders the options page in WordPress. -->
<div class="wrap">
    <?php screen_icon('plugins'); ?>
    <h2>Tag to Category Associator</h2>
    <div id="settings-removed-msg" class="updated"><p>Associations were successfully removed.</p></div>
    <form action="<?php echo $_SERVER['PHP_SELF'].'?page=tag2cat-associator'; ?>" method="post">


    <?php
    settings_fields('cb_t2c_options');
    do_settings_sections('tag2cat-associator');
    ?>

    <input name="Submit" type="submit" value="Save Changes" />
    </form></div>

PHP

//These are the form elements.

//Show the buttons to remove all associations and remove a single association.
    echo '<table>';
    echo '<tr>';
        echo '<td></strong>Remove existing associations</strong></td>';
        echo "<td><form action='" . $_SERVER['PHP_SELF'] . "?page=tag2cat-associator' method='post'>";
        echo "<select name='remove_single' id='removeSingle' class='remove-single' >";
            foreach ($cb_t2c_show_associations as $tags) {
            echo "<option value = '".$tags->assoc_ID."'>".$tags->assoc_ID."</option>";
            }
        echo '</select>';
        echo "&nbsp;<input type = 'submit' name='submit-remove' value='Remove'></input>";
    echo '</form></td></tr>';
    echo '<tr>';
        echo '<td>Remove all (Will delete existing associations)</td>';
        echo "<td><form action='" . $_SERVER['PHP_SELF'] . "?page=tag2cat-associator' id='formdeleteassoc' method='post'>";
        echo "<input name='remove_all' id='removeAll' class='remove-all' type='submit'  value='Remove All'></input></form></td></tr>";
    echo '</table>';

//The if's alter the database if the right $_POST information occurs.
if ( isset( $_REQUEST['remove_all'] ) ){
        $wpdb->query("DELETE FROM ".$prefix."cb_tags2cats");
        }

    if ( isset( $_REQUEST['remove_single'] ) ) {
        $remove_assoc = $_REQUEST['remove_single'];
        $wpdb->query("DELETE FROM ".$prefix."cb_tags2cats WHERE assoc_ID = " . $remove_assoc);
        }

Answer 1

The problem was due to having 2 settings_fields as registered settings in WordPress. The basic structure was:

function cb_t2c_admin_init() {
register_setting('cb_t2c_options', 'cb_t2c_options' /*'cv_t2c_validate_options'*/);

    //Define sections and settings
    add_settings_section(
        //This defined the settings section.
        );

    add_settings_field(
        //This defined the first setting, with a call to a function.
        );

    add_settings_field(
        //This defined the unwanted setting.
    );

}

What I wanted to accomplish with WordPress was to have a section outside the form, which would show the user the currently selected options in a simple HTML table. Therefore, I deleted the second ‘add_settings_field’ function, took the contents of its callback function and put it at the end of the function that draws the options page. E.g.,

//Draw the options page
function cb_t2c_plugin_options_page () {
    $cb_t2c_remove_all_url = plugin_dir_url( _FILE_ ) . 'remove_all.php';
?>

    <div class="wrap">
    <?php screen_icon('plugins'); ?>
    <h2>Title</h2>
    <div id="new-assoc-msg" class="updated"><p>Data was successfully added.</p></div>
    <form id="formsavesettings" name="save_settings" action="<?php echo $_SERVER['PHP_SELF'].'?page=the_options_page'; ?>" method="post">

    <?php
    settings_fields('cb_t2c_options');
    do_settings_sections('section_name');
    ?>

    <input name="Submit" type="submit" value="Save Changes" />
    </form></div>
    <?php

// Here is where I added the PHP code to show my table full of already selected values.
// This is accomplished with 1 settings section and 1 settings field.
// By previously putting the code in a settings field, I was telling WordPress to pass along the values to the form.
};

This does not yet take care of the SQL injection vulnerability, but it does explain why an unintended value was getting passed to the form.