wordpress - using ajax to submit form on post edit page

Question

I am trying to understand basic ajax form submission in wordpress in order to submit a form from post edit page. Please excuse newbie posting but any help or pointers would be much appreciated as I'm lost here and many things I don't understand. I've tried a number of tutorials and examples but can't get them to work or adapt them to work. To do below I'm trying to adapt example at Submitting a form with ajax in Wordpress

Basics -

1. add form to post edit page using plugin
2. submit form data via ajax
3. insert data into database with php handler

i don't want to submit data to post_meta table but to a custom table. required as there should be multiple form submissions, ie same form submitted many times from post edit page.

1. add form to post edit page using plugin

Plugin adds form to page (from example above)

<div class="inside">
<form class="form" id="ajax-contact-form" action="#">                            
<input type="text" name="name" id="name"  placeholder="Name">
<button type="submit" class="btn">Submit</button>
</form>
</div> 

But this form is nested within <form name="post" action="post.php" method="post" id="post">. I want the form to be separate from main post form so user will only submit ajax-contact-form data, not full post data. Is this a problem? My instinct says it is but I don't know solution

2. submit form data via ajax

Below (also adapted from example) is added in main plugin php and outputs ok to admin header but I'm not sure what add_action hook should be.

add_action( 'admin_head', 'contact_form_javascript' );

function contact_form_javascript() {
?>
<script type="text/javascript" >
$('#ajax-contact-form').submit(function(e){
var name = $("#name").val();
$.ajax({ 
     data: {action: 'contact_form', name:name},
     type: 'post',
     url: ajaxurl,
     success: function(data) {
          alert(data); //should print out the name since you sent it along

    }
});

});
</script>

this does not seem to pass data to handler

3. Insert data into database with php handler

I've tested below works to insert ok by adapting example from http://codex.wordpress.org/AJAX_in_Plugins . But ajax data from javascript above does not seem to reach handler below.

add_action('wp_ajax_contact_form', 'contact_form');
add_action('wp_ajax_nopriv_contact_form', 'contact_form');

function contact_form()
{
global $wpdb;

$wpdb->insert( 
'ajaxtesttable', 
array( 
'col1' => $_POST["name"]
), 
array(
    '%s' 

) 
);

echo $wpdb->insert_id;
die();
}

I don't think problem is with handler, handler seems to be the easy bit. I think issue is with either -

plugin form position on edit page OR javascript to 'ajax' data to php handler.

I'm doing above as baby steps to sending full form data via ajax to handler. What I really want is the javascript that will send full form data to handler, by serialising it and passing it through. A simple example of how to do this would be great.

note: I've also tried to enqueue built in jquery form handler with below. This would seem simple way to submit data. But I don't see below reflected in source code

//to enqueue the built in jquery-form of Wordpress

add_action( 'admin_enqueue_scripts', 'inputtitle_submit_scripts' );
function inputtitle_submit_scripts() {
wp_enqueue_script('jquery-form'); // it should load /wp-includes/js/jquery/jquery.form.js
}

add_action( 'admin_enqueue_scripts', 'inputtitle_submit_scripts2' );
function inputtitle_submit_scripts2() {
wp_enqueue_script( 'json-form' ); // it should load /wp-includes/js/jquery/jquery.form.js 

any help with above long question would be very much appreciated. Thank you.

Answer 1

I can spot one big problem in the code in the hook admin_head:

• it's lacking jQuery noConflict mode
• it's safer to print this in admin_footer
• it has to print only in the screen post.php
• it has to print only in the correct post type

add_action( 'admin_footer-post.php', 'contact_form_javascript' );

function contact_form_javascript() {
    if( 'post' != get_current_screen()->post_type )
        return;
    ?>
    <script type="text/javascript" >
    alert('Working only in the desired screen'); // Debug
    jQuery(document).ready(function($)
    {
        // Now it's safe to use $
        // And the code will be available when safe: document.ready
    });
    </script>
    <?php
}

And then, I'd try to avoid putting the <form> wrapper, as WP may get confused with its own publish-post form action.