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

Lesezeit: 5 Minuten

Formularubermittlung mit AJAX und Bearbeitung der Antwort auf der Wordpress Website
Supreet Singh

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 = "ankushverma61@gmail.com";
    $mail_cont = "FROM: $person_name. \n Email: $email. \n Msg: $msg";
    echo "success";
    mail($recipient, $subj, $mail_cont) or die("UNABLE TO SEND!!!");

}
}
 ?>

Formularubermittlung mit AJAX und Bearbeitung der Antwort auf der Wordpress Website
simanchala

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 <xyz@xyz.com>";  
        $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

  • Funktioniert nicht. Jetzt taucht die Fehlerbox gar nicht mehr auf. Ist die Antwort der Text, der in der PHP-Datei wiedergegeben wird? Ich habe meine Datei contact-form.php hinzugefügt. Bitte teilen Sie mir mit, ob darin Fehler enthalten sind.

    – Supreet Singh

    30. Juni 2013 um 12:35 Uhr

1644015906 973 JSON von PHP zu JavaScript zuruckgeben
iasp

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;
     }

998810cookie-checkFormularübermittlung mit AJAX und Bearbeitung der Antwort auf der WordPress-Website

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy