0

I'm trying to create a simple contact form using jQuery to validate the form and AJAX to pass it to PHP and WP wp_mail() to send it.

I have a simple form like this.

    <form role="form">
        <div class="form-group">
            <label class="">Name</label>
            <input type="text" id="name" class="form-control" name" />
        </div>

        <div class="form-group">
            <label class="">Email</label>
            <input type="text" id="email" class="form-control" name="email" />
        </div>

        <?php wp_nonce_field( 'atex_php', 'atex_nonce' ); ?>

        <button class="submit">Submit</button>

    </form>

The jQuery function to validate the inputs and send to PHP:

//IsEmail and fadeOut functions aren't shown

    $atj(function(){
      $atj('submit').click(function(e) {
        e.preventDefault();

        if(verfiyFields()) {

          $atj.post({
            data : {
              action : "request",
              firstName : $atj("#name").val(), 
              email : $atj("#email").val(), 
            }
          })
        }
      });
    })

    //Verfiy 
    function verfiyFields() {
      var flag = true;
      var name =  $atj('#name');
      var email = $atj('#email');

      if(name.val().indexOf(' ') === -1 ){
        name.parent().prepend('<p class="form-error">Please enter name, first space last</p>');
        fadeOut();
        flag = false;
      }
      if(!IsEmail(email.val())){
        email.parent().prepend('<p class="form-error">Please enter valid email address</p>');
        fadeOut();
        flag = false;
      }
      return flag;
    }   

And the the PHP in the functions.php:

    add_action( 'wp_ajax_nopriv_request', 'my_action_callback' );
    function my_action_callback() {

        if ( isset( $_POST['atex_nonce'] ) && wp_verify_nonce( $_POST['atex_nonce'], 'atex_php' ) ) {
            $name = $_POST['firstName'];
            $email = $_POST['email'];

            $send_to = me@test.co.uk;

            $subject = 'Request from'. $name;

            $success = wp_mail($send_to, $subject, $message);

            if($success){
                return true;
            }else{
                return false;
            }

        }   
    }

I'm getting a 404 Not Found for [object%20Object] in the Network tab of chrome dev tools when the submit is clicked.

How can I get this to work

  • Validating via JS only. No checks on user provided data. You will so get hacked... You might want to look at the esc_*() functions in core and filter_var() and its _array() counterpart in PHP. – kaiser Oct 11 '14 at 14:31
1

From quick look at your code you seem to be omitting where you are submitting request to. By default it is just current page, which isn't typically equipped to receive the request.

Since you are using wp_ajax_ hook you need to point request at admin-ajax.php endpoint. On admin side the URL is provided in ajaxurl JS variable, on front end side you would need to provide it to your code yourself.

  • Thanks for the reply Rarst - do you know of any tutorials of information that explains how to do this, I can't seem to find any and I'm going round in circles – user668499 Oct 11 '14 at 14:00
  • AJAX in Plugins in Codex would be a start. – Rarst Oct 11 '14 at 14:01
  • Read that but still can't work it out – user668499 Oct 11 '14 at 14:07
  • Even more on AJAX – kaiser Oct 11 '14 at 14:30
0

Indeed, you forgot to mention the destination of the request, and you are also missing ajaxurl (since you are using wp_ajax).

Another, more simple solution would be to create a php file to handle the request (ex: process-request.php), then to specify the url of this file in the ajax object before you submit your request. This solution is less "WordPress Compliant", but slightly more easy to do.

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.