Front-end update_post_meta with ajax

Question

as written in title I'm trying to update a post_meta using Ajax. Actually I'm a complete newbie to Ajax and how it works so, if it is possible, I would appreciate if someone could 'take me by hand' and explain how to achieve this.

Actually this is my code:

<?php
// in custom page template
if ( isset( $_POST['5e'] ) && wp_verify_nonce($_POST['5e'],'update_5e_postmeta') )
    { //if nonce check succeeds.
        global $post;
        $postid = $post->ID;
        $data = $_POST['cinqueuro'];
        update_post_meta($postid,'Banconote5',$data);
    }
;?>
<?php

$cinqueuro = get_post_meta($post->ID, 'Banconote5', true);?>
<form method="post" action="">
   <?php wp_nonce_field('update_5e_postmeta','5e'); ?>
   <label>Banconote da 5</label>
   <input type='text' name='cinqueuro' value='<?php echo $cinqueuro ;?>' />
   <input type='submit' value='save' />
</form>
<h4>Valore banconote da 5 =  <?php $tot5 = ($cinqueuro*=5);echo $tot5 ;?>&euro;</h4>

It works and let me see the result but only after clicking on save button.

What I need is that each time a value is inserted inside the form it is Automagically saved in DB and operation is done.

My PHP code is basically taken from this answer: Front-end update_post_meta snippet displays white screen?

Answer 1

You should check out this document on WordPress.org: http://codex.wordpress.org/AJAX_in_Plugins

It gives you everything you need to create front-facing XHR functionality. Make sure to set a nopriv hook for those who aren't logged in. http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

Also the JS variable ajaxurl is only set on the backend. You will need to define that yourself on the front-end.

Let me know if you have any questions.