Formularübermittlung mit AJAX und Bearbeitung der Antwort auf der WordPress-Website

Ich habe eine WordPress-Website. Ich habe ein Kontaktformular erstellt und es wird von AJAX gepostet. Hier ist der Code:

<script type="text/javascript"> 
jQuery(document).ready(function(){
    $("#error_box").hide();
    $('#contact_form').submit(function(e){

        // prevent the form from submitting normally
        e.preventDefault();
        var na=$("#1").val();
        var email2=$("#2").val();
        var subject2 = $("#3").val();
        var message2 = $("#4").val();
   var mydata = "pn2="+na+"&email="+email2+"&subject="+subject2+"&msg="+message2;   

        alert(mydata);
            $("#contact_form").css({"opacity":"0.1"});  

        $.ajax ({
            type: 'POST',
            url: $(this).attr.action,  // Relative paths work fine
            data: mydata,
            success: function(){
            $("#contact_form").css({"opacity":"1"});    
            $('#error_box').fadeIn('fast').css({"height": "auto"});
            }
        });

    });
});
    </script>

Wenn das Formular gesendet wird, möchte ich, dass die Fehlerbox (#error_box) eine Nachricht gemäß den gesendeten Daten anzeigt, wenn beispielsweise eines der Felder leer ist, sollte es einen Fehler anzeigen oder eine Erfolgsmeldung anzeigen, wenn die Verarbeitung erfolgreich ist und das Formular wurde verschickt. Gibt es eine Möglichkeit, dies zu tun?

[UPDATE]

Hier ist meine contact-form.php-Datei (die Aktion)

<?php   if(isset($_POST['pn2']) && isset($_POST['email']) && isset($_POST['subject']) && isset($_POST['msg']))
    {

    if(empty($_POST['pn2']) || empty($_POST['email']) || empty($_POST['subject']) || empty($_POST['msg'])){
        echo 'EMPTY ERROR';

    } 
    else
    {
    $name = $_POST['pn2'];
    $email = $_POST['email'];
    $subj = $_POST['subject'];
    $msg = $_POST['msg'];
    $to = "[email protected]";
    $mail_cont = "FROM: $person_name. \n Email: $email. \n Msg: $msg";
    echo "success";
    mail($recipient, $subj, $mail_cont) or die("UNABLE TO SEND!!!");

}
}
 ?>

Formularübermittlung mit Ajax-Aufruf
Kontakt Formular

<form action="#" id="contactForm" method="post">  
 <input class="require" type="text" placeholder="First Name" name="firstName">    
<span class="fieldError"></span>  
<input class="require" type="text" placeholder="Last Name" name="lastName">  
<span class="fieldError"></span>   
.   
.  
.  
<input type="submit" value="Submit">  
</form>

clientseitige Validierung mit Ajax-Aufruf

jQuery('#contactForm').submit(ajaxSubmit);  
function ajaxSubmit(){  
var newContactForm = jQuery(this).serialize();  
var flag = 0;  
    jQuery('.require', '#contactForm').each(function(){  
        var inputVal = jQuery(this).val();  
if(jQuery.trim(inputVal) === ""){  
            flag = 1;  
            jQuery(this).next().html("Can't be blank");  
            jQuery(this).next().show();  
        }  
        else{  
            jQuery(this).next().hide();  
        }  
    });  
    if(flag){  
        return false;  
    }  
    jQuery.ajax({  
        type:"POST",  
        url: "/wp-admin/admin-ajax.php?action=contactForm",  
        data: newContactForm,  
        success:function(data){  
            jQuery(':input','#contactForm')  
                .not(':button, :submit, :reset, :hidden')  
                .val('')  
                .removeAttr('checked')  
                .removeAttr('selected');  
            jQuery("#feedback").html(data);  
            jQuery("#feedback").fadeOut(10000);  
        },  
        error: function(errorThrown){  
            alert(errorThrown);  
        }  
    });  
    return false;  
}

Formulardaten in DB speichern und E-Mail senden
fügen Sie den folgenden Code in functions.php hinzu

wp_enqueue_script('jquery');  
add_action('wp_ajax_addContactForm', 'addContactForm');  
add_action('wp_ajax_nopriv_addContactForm', 'addContactForm');  
function addContactForm(){  
    global $wpdb;  
    $first_name = $_POST['firstName']; $last_name = $_POST['lastName'];  
    $email = $_POST['email'];  
    .  
    .  
    .  
    if($wpdb->insert('table_name',array(  
        'first_name' => $first_name,  
        'last_name' => $last_name,  
        'email' => $email,  
        .  
        .  
        .  
    ))===FALSE){  
        echo "Error";  
    }  
    else {  
        $headers="From: xyz <[email protected]>";  
        $subject = "Thank you";  
        $body = "<p>Thank you</p><p>.........</p>";  
        wp_mail( $email, $subject, $body, $headers);  
        echo "<div class="success">Thank you for filling out your information, we will be in contact shortly.</div>";  
    }  
    exit;  
}  

Du solltest benutzen:

      $.ajax ({
            type: 'POST',
            url: $(this).attr.action, 
            data: mydata,
            success: function(response) {  // here you receive response from you serverside 
               $("#contact_form").css({"opacity":"1"});    
               $('#error_box').html(response).fadeIn('fast').css({"height": "auto"});
            }
        });

Ihre Serveraktion url: $(this).attr.action, sollte eine Nachricht zurückgeben, die eingefügt wird #error_box

Erstellen Sie zunächst ein solches Formular

<p class="register-message"></p>
<form action="#" method="POST" name="testregister" class="register-form">
  <fieldset>
    <label><i class="fa fa-file-text-o"></i> Register Form</label>
    <input type="text" name="firstname" placeholder="Username" id="firstname">
    <p id="firstname-error" style="display:none">Firstname Must be Enter</p>
    <input type="email" name="email" placeholder="Email address" id="email">
    <p id="email-error" style="display:none">Email Must Be Enter</p>
    <input type="submit" class="button" id="test" value="Register">
  </fieldset>
</form>

dann binden Sie den Klick und senden Sie den Ajax-Aufruf

<script type="text/javascript">

 jQuery('#test').on('click', function(e) {
    e.preventDefault();
    var firstname = jQuery('#firstname').val();
    var email = jQuery('#email').val();
    if (firstname == "") {
        jQuery('#firstname-error').show();
        return false;
    } else {
        jQuery('#firstname-error').hide();
    }
    if (email == "") {
        jQuery('#email-error').show();
        return false;
    } else {
        jQuery('#email-error').hide();
    }
    jQuery.ajax({
        type: "POST",
        dataType: 'json',
        url: "<?php echo admin_url('admin-ajax.php'); ?>",
        data: {
        action: "test", // redirect function in function.php
        firstname: firstname,
        email: email
        },
        success: function(results) {
        //console.log(results);
        if (results == "1") {
            jQuery('.register-message').text("Email already exist");
        } else {
            jQuery('.register-message').text("Register successfu");
        }

        },
        error: function(results) {}
    });
    });
 </script>

Im function.php Fügen Sie den folgenden Code hinzu, um Daten in die Tabelle einzufügen

 <?php
     // 

     add_action('wp_ajax_test', 'test', 0);
     add_action('wp_ajax_nopriv_test', 'test');
     function test()
     {
         $firstname = stripcslashes($_POST['firstname']);
         $email = stripcslashes($_POST['email']);

         global $wpdb;
         $q = $wpdb->prepare("SELECT * FROM wp_test WHERE email="" . $email . "" ");
         $res = $wpdb->get_results($q);
         if (count($res) > 0) {
             echo "1";
         } else {
             $user_data = array(
                 'firstname' => $firstname,
                 'email' => $email
             );
             $tablename = $wpdb->prefix . 'test';
             $user_id = $wpdb->insert($tablename, $user_data);
             echo "0";
         }
         die;
     }