Plugin Form Submitting to admin-ajax.php instead of admin-post.php

Question

I am building a plugin which loads a form into a table cell when clicked.

Here is the AJAX:

    public static function cp_libhours_ajax(){
?>
<script>
    jQuery(document).ready(function(){
        jQuery('.libhours-row a').click(function(e){
            e.preventDefault(); //don't let the link click through

            //this is the cell in which the form will be placed
            var cellToReplace = jQuery(this).parent('td').prop('className');

            //extract the values of the parameters passed in the URL
            var querystring = jQuery(this).prop('href').split("?")[1];
            var values = querystring.split("&"); 

            var count = 0;
            var param = [];
            jQuery(values).each(function(index, element) {
                param[count] = element.split("=")[1];
                count++;
            });

            //data object to be passed to the ajac function
            var data = {
                'action': 'cp_libhours_ajax',
                'semester': param[0],
                'day_of_week': param[1]
            };
            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            jQuery.post(ajaxurl, data, function(response) {
                jQuery('.' + cellToReplace).html(response);
            });
        });
    });
</script>

Here is the response generated from the callback function:

/**
 * CALLED VIA AJAX!
 *
 * within public static function cp_libhours_ajax()
 */
public static function cp_libhours_ajax_callback() {
    global $wpdb; // this is how you get access to the database

    $semester = $_POST['semester'];
    $day_of_week = $_POST['day_of_week'];

    $output = 
        '  
        <form method="post" action="'.admin_url('admin-post.php').'">
            '.wp_nonce_field('cp_libhours_pest_control','cp_libhours_pest_control_field').'
            <fieldset>
              <p class="clearfix">  
                <label for="regular_open">Open:</label>
                <input type="text" id="regular_open" name="regular_open" class="timepicker">
                <label for="regular_close" >Close:
                <input type="text" id="regular_close" name="regular_close" class="timepicker">
                </label>
              </p>
              <p>
                <input type="checkbox" id="regular_24" name="regular_24"> 24-HR
                <input type="checkbox" id="regular_closed" name="regular_closed"> Closed
              </p>
              <div>
                <button type="submit">Save</button>
                <button type="reset">Cancel</button>
                <input type="hidden" name="semester" value="'.$semester.'">
                <input type="hidden" name="day_of_week" value="'.$day_of_week.'">
                <input type="hidden" name="action_type" value="add_regular_hour">
              </div>
                </fieldset>
                <input type="hidden" name="action" value="hours_action">
                <input type="hidden" name="first_year" value="2014">
                <input type="hidden" name="area_id" value="1">
        </form> 
        ';
    echo $output;
    wp_die(); // this is required to terminate immediately and return a proper response
}

The form shows up just fine on the page. However, when it is time to submit, the form does not go to the specified link in the action tag (admin-post.php), but rather, to admin-ajax.php. I get a white page with a '0'.

Answer 1

This happens because you specify in your ajax request a different url than you use in the form.

Query.post(ajaxurl, data, function(response) {

you don't show it in the code snippet butajaxurl is usually set to be the {site url}\wp-admin\admin-ajax.php.

Answer 2

try to add return false; after the ajax call. like this:

  jQuery.post(ajaxurl, data, function(response) {
    jQuery('.' + cellToReplace).html(response);
  });
return false;
});

this way the ajax is called only once.