javascript - Page updates, when I try to send mail-foem data by using ajax+php

I am trying to send data by using ajax technology. I made an ajax_form.js file, that responsible for this function:

$(document).ready(function(){
    var name = $("#name").val();
    var email = $("email").val();
    var message = $("message").val();
$("#push").submit(function(e){  // $("#push") is a button
    e.preventDefault();
    $.ajax({
        url: "../send.php",
        tpye: "POST",
        cache: false,
        data: { 'name': name, 'email': email, 'message': message },
        dataType: 'html',
        beforeSend: function(){
            $("#push").prop("disabled",true);
        },
        succsess: function(data){
            if(!data){
                alert("???€???±???° ?????? ???‚?????°?????µ ???°?????‹?…");
            }
            else{
                $("#mail_form").trigger("reset");
                alert(data);    
            }
            
            $("push").prop("disabled", false);
        },
    })
    
})
}) 
Copy code

I made the following script send.php, that contain variables and mail() function for sending:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = "=?utf-8?B?".base64_encode("?—?°???????° ?? ???°???‚?°")."?=";
$headers = "From: $email\r\nReply to: $email\r\nContent-type: text/html; charset=utf-8\r\n";



$name = trim($name);
$name = trim($email);

if (isset($name) && isset($email) && isset($message)){
    $success = mail("[email protected]", $subject, $message, $headers);
    echo $success;
}
ini_set("display_errors","1");
ini_set("display_startup_errors","1");
ini_set('error_reporting', E_ALL);

?>
Copy code

Thisa is my html-form:

<form id="mail_form" class="mail__form" action="" id="send" method="post" name="form">
                    <label class="mail__label">
                        ??????:
                    </label>
                    <br>
                    <input class="mail__input" id="name"type="text" name="name" placeholder="??????" required>
                    <br>
                    <label class="mail__label">
                        E-MAIL:
                    </label>
                    <br>
                    <input class="mail__input" type="mail" name="email" id="email" placeholder="[email protected]" required>
                    <br>
                    <label class="mail__label">
                        ???????‘?©?•?????•:
                    </label>
                    <br>
                    <textarea id="message" name="message" class="mail__message" required>
                        
                    </textarea>
                    <br>
                    <button id="push" type="submit" class="mail__button">
                        ??????? ???’?????¬
                    </button>

                </form>
Copy code

Here I have two problems: 1)When I click the button, the page is updated, and data from the mail form does not send; it should not update web page because I am usinge.preventDefault() 2)And I suppose that my web-form doesn't work, because it should bealert() after sending data

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.