Question

我有一个带有提交按钮的表单，想要删除该按钮并将其替换为加载的gif图像。 我不希望仅在点击时发生这种情况，因为表单已经过验证我希望按钮仅在所有输入字段正确填充时消失以便gif图像显示进度。我怎样才能做到这一点？

注意：这也不是成功触发的事件，我希望它是一个进度指示器。成功后，表单会淡出并显示一条消息：“感谢您与我们联系！我们会很快回复您...”并且下面的jQuery已经处理过这个问题。

这是php代码：

<?php 
    require_once"connection.php";
?>
<?php
if (isset($_POST['submit'])) {

$to = "???@????";
$from = "???@???";
$subject = "New Staff Added To Extension List";
$message =  "New Staff: " . "\n\n" . "Name : " . $name . " " . "\n\n" . "Email: " . $email . " " . "\n\n" . "Department: " . $department . " " . "\n\n" . "Extension: " . $extension . " " . "\n\n" . "Cellphone: " . $
$headers = "From:" . $from;
mail($to,$subject,$message,$headers); 
}
?>
<!DOCTYPE html>
<html>
<head>
    <?php include"includes/head.inc"; ?>
    <script>tinymce.init({selector:'textarea'});</script>
</head>
<body>
    <div class="wrapper">

            <!-- header section -->
            <div class="header">
                    <div class="headerContent"><h1>CONTACT LIST</h1></div>
            </div>

            <!-- content section -->
            <div class="content">
            <div><h1>Create New Contact</h1></div>
                    <hr>
                    <div class="contact">
                            <div class="contact_insert">
                                    <form action="insert_contact.php" method="post">
                                            <table style="float:left" width="50%">
                                                    <tr>
                                                            <td>Name:</td>
                                                            <td><input type="text" name="name" placeholder="name"  size="40%"></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Email:</td>
                                                            <td><input type="text" name="email" placeholder="email" size="40%"></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Department:</td>
                                                            <td><input type="text" name="department" placeholder="department" size="40%"></td>
</tr>
<tr>
<td>Extension Number:</td>
<td><input type="text" name="extension" placeholder="extension" size="40%"></td>
                                                    </tr>
                                                    <tr>
                                                            <td>Cellphone:</td>
                                                            <td><input type="text" name="cellphone" placeholder="cellphone" size="40%"></td>
                                                    </tr>
                                            </table>
                                            <div class="clear"></div>
                                            <input class="insert_contact_button" type="submit" name="submit" value="Insert Contact">
                                            <a href="index.php"><input class="cancel_contact_button" type="button" value="Cancel"></a>
                                    </form>
                            </div>
                            <div class="clear"></div>
                    </div>
            </div>  
</body>
</html>         
<?php 
 if (isset($_POST['submit'])) {

            $name = $_POST['name'];
            $email = $_POST['email'];
            $department = $_POST['department'];
            $extension = $_POST['extension'];
            $cellphone = $_POST['cellphone'];

              $insert_contact = "insert into contacts (name, email, department, extension, cellphone) values ('$name', '$email', '$department', '$extension', '$cellphone')";

            $sql_insert_contact = $conn->query($insert_contact);

            if ($sql_insert_contact == true) {
                    header("Location: index.php");
            }
    }
 ?>

这里是jQuery：

<?php

// Email address verification
function isEmail($email) {
    return preg_match('|^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]{2,})+$|i', $email);
};

if($_POST) {

    // Enter the email where you want to receive the message
    $emailTo = 'example@gmail.com';

    $clientName = addslashes(trim($_POST['name']));
    $clientEmail = addslashes(trim($_POST['email']));
    $number = addslashes(trim($_POST['number']));
    $message = addslashes(trim($_POST['message']));

    $subject = 'Query from My Domain';

    $sendMessage = 'Hi' . "\n\n";
    $sendMessage .= $message . "\n\n";
    $sendMessage .= 'From: ' . $clientName . "\n";
    $sendMessage .= 'Email: ' . $clientEmail . "\n";
    $sendMessage .= 'Contact number: ' . $number . "\n";

    $array = array();
    $array['nameMessage'] = '';
    $array['emailMessage'] = '';
    $array['numberMessage'] = '';
    $array['messageMessage'] = '';

    if($clientName == '') {
        $array['nameMessage'] = 'Please enter your full name.';
    }
    if(!isEmail($clientEmail)) {
        $array['emailMessage'] = 'Please insert a valid email address.';
    }
    if($number == '') {
        $array['numberMessage'] = 'Please enter a valid contact number.';
    }
    if($message == '') {
        $array['messageMessage'] = 'Please enter your message.';
    }
    if($clientName != '' && isEmail($clientEmail) && $message != '') {
    // Send email
    $headers = "From: " . $clientName . ' <' . $clientEmail . '>' . "\r\n";
    $headers .= PHP_EOL;
    $headers .= "MIME-Version: 1.0".PHP_EOL;
    $headers .= "Content-Type: multipart/mixed;".PHP_EOL;
    $headers .= " boundary=\"boundary_sdfsfsdfs345345sfsgs\"";
    mail($emailTo, $subject, $sendMessage, $headers);
    }

    echo json_encode($array);

}   else {
        header ('location: index.html#contact');
}

?>

Answer 1

在你的ajax调用之后做一个ajax .done（）来替换回来的按钮

删除表单提交按钮并替换为加载gif

1 个答案: