3

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>
2
  • 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, 2013 at 4:31
  • Well, basically I'm asking why I'm getting a 404? What am I doing wrong? Aug 19, 2013 at 5:24

4 Answers 4

9

This was very frustrating to figure out. I spent hours on this issue and discovered your problem is in this input:

<input type="text" name="name" id="name" size="30" value=""/> 

Try changing the input field name to anything but "name", for example:

<input type="text" name="user_name" id="name" size="30" value=""/> 
3
  • 3
    Yes, there is a list of reserved names, where if you use one in your forms, wp will bork, usually with no good error. Oct 18, 2015 at 18:20
  • 3
    Unbelievable. WP doesn't like the term used as the name for a POST body property so it throws a 404?!?!?! So stupid.
    – AJB
    Dec 31, 2018 at 21:42
  • 2
    Here they are: codex.wordpress.org/Reserved_Terms
    – kjones
    Jan 30, 2019 at 19:01
2

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.

0

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');
1
  • 1
    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? Aug 19, 2013 at 5:27
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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