Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I just got this code from a tutorial. I can't seem to get it to work.

HTML (home.php)

    <form name="myform" id="myform" action="" method="POST">  
      <!-- The Name form field -->
      <label for="name" id="name_label">Name</label>  
      <input type="text" name="name" id="name" size="30" value=""/>  
      <br>
      <!-- The Email form field -->
      <label for="email" id="email_label">Email</label>  
      <input type="text" name="email" id="email" size="30" value=""/> 
      <br>
      <!-- The Submit button -->
      <input type="submit" name="submit" value="Submit"> 
   </form>
   <!-- We will output the results from process.php here -->
   <div id="results"><div>

PHP (function.php)

    function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');

Javascript (header.php)

    <script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});
</script>
share|improve this question
    
What is the question? "I can't seem to get it to work" isn't much of a trouble ticket. –  s_ha_dum Aug 19 '13 at 4:31
    
Well, basically I'm asking why I'm getting a 404? What am I doing wrong? –  user1526570 Aug 19 '13 at 5:24

3 Answers 3

If you are getting a 404 on the AJAX request, then your path is wrong. Use admin_url to construct the path rather than hard-coding it.

jQuery.post(<?php admin_url('admin-ajax.php') ?>, // ...

You are probably better off printing the admin url address to a Javascript variable via wp_localize_script than you are printing it directly in the template. For example:

wp_enqueue_script('jquery');   
wp_localize_script( 'jquery', 'my_ajax_vars', array(
    'ajaxurl'       => admin_url( 'admin-ajax.php' )
);

You are usually better off registering and enqueuing scripts rather than writing them directly into templates, especially header.php. As written, what your javascript loads on every page and I doubt it is needed on every page.

share|improve this answer

First of all, sanitize all your data.

Second, I will rather do this:

jQuery(function($){
    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            //if you don't have your script localized and you will add it in header.php (not a good practice)
            $.post(
               '<?php echo admin_url('admin-ajax.php); ?>',
               form.serialize(),
               function(data){
                   //just to check the data
                   console.log(data);
                   $('#results').html(data);
               }

            });
            jQuery.post('/wp-admin/admin-ajax.php', jQuery("#myform").serialize(), function(data) {
                jQuery('#results').html(data);
            });
        }
    });
});

And in your php (functions.php) file:

Be sure to add die(); at the end of the functions.

function myform(){
       echo "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
       die();
    }
    add_action('wp_ajax_myform', 'myform');
    add_action('wp_ajax_nopriv_myform', 'myform');
share|improve this answer
    
There seems to be an error in this line '<?php echo admin_url('admin-ajax.php); ?>', so I changed it to '<?php echo admin_url('admin-ajax.php'); ?>', but I still get a 404 error. Any idea why I'm getting a 404? –  user1526570 Aug 19 '13 at 5:27

You forgot to put your (wp) action in the form or jQuery ajax function.

add <input type="hidden" name="action" value="myform"> to the form and it will hook on your ajax functions.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.