堆栈内存溢出
  繁体   English   中英

我的联系表上有两 (2) 个问题（练习）

[英]I have two(2) problem on my CONTACT FORM (practice)

 原文  2022-09-01 01:35:48  7   1    javascript/ php/ html/ css

问题描述

我的联系表（练习）上有两 (2) 个问题。

“这是一个有效的联系表格，请尝试将其移动到现场”

第一：当我点击“发送消息按钮”时，如果消息发送成功，按钮旁边的文本必须是“蓝色”并且表单必须是“重置” - 在我的情况下，即使消息发送成功，出现的文本是红色的，并且表单不会重置。

第二：当我输入一个无效的 email 地址时，它会在“发送”按钮旁边生成一个红色文本，说明“无效的 email 地址”（这是正确的），但是当我将其更改为有效的 Z0C83F57C3 再次单击发送按钮，786A0B4A39EFAB出现的只是最后一个文本，只是将其颜色更改为蓝色。 我想要的是当我在出现错误消息后再次单击按钮时（在我的情况下，错误消息是“无效的 email 地址”）必须出现的文本是“正在发送消息...”

这是示例代码。

<<索引.html>>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
</link>
    <link rel="stylesheet" href="./body.css">
    <link rel="icon" href="./icon/icon1.ico" type="image/x-icon">
    <title>Personal-CV</title>
</head>
<body>
    <section class="contact" id="contact">
        <h1 class="heading"><span>Contact </span>me</h1>
        <div class="row">
            <div class="content">
                <h3 class="title">Contact info</h3>
                    <div class="info">
                        <h3> <i class="fas fa-envelope"> </i>acct4568@gmail.com</h3>
                        <h3> <i class="fas fa-phone"> </i>+244-455-5555</h3>
                        <h3> <i class="fas fa-mobile"> </i>0987 654 3210</h3>
                        <h3> <i class="fas fa-map-marker-alt"> </i>Nara, Japan</h3>
                    </div>
            </div>
        <form action = "#">
           
            <input type="text" name="name" required placeholder="enter your name" class="box"> 
            <input type="text" name="email" required placeholder="enter your email" class="box">
            <input type="tel" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}" name="phone" required placeholder="ex. 1234-567-8900" class="box">
            <textarea cols="30" rows="10" class="box message" required placeholder="write your message" name="message"></textarea>
        <div class="button-area">
            <button type="submit">Send message<i class="fas fa-paper-plane"></i></button>
            <span >Sending your message...</span>
        </div>
        </form>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./script.js"></script>
</body>
</html>

<<body.css>>

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

:root {
    --gold:gold;
}

* {
    font-family: 'Montserrat', sans-serif;
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

*::selection{
    background:var(--gold);
    color: #201f1f;
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body{
    background: #201f1f;
    overflow-x: hidden;
  
}

section{
    min-height: 100vh;
    padding: 1rem;
}
.heading{
    text-align: center;
    margin: 0 6rem;
    font-size: 4rem;
    padding: 1rem;
    border-bottom: .2rem solid rgb(82, 78, 78);
    color: azure;
}
.heading span{
    color: rgb(221, 141, 123);
    font-weight: 900;
}

.contact .row{
    display: flex;
    padding-left: 10rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.contact .row .content{
    flex: 1 1 30rem;
    padding: 4rem;
    padding-bottom: 0;
}
.contact .row form{
    flex: 1 1 45rem;
    padding: 2rem;
    margin: 2rem;
    margin-bottom: 4rem;
}
.contact .row form .box{
    padding: 1.5rem;
    margin: 1rem 0;
    background: #625e5e85;
    color: rgb(205, 205, 205);
    text-transform: none;
    border-radius: 1rem;
    font-size: 1.7rem;
    font-weight: 700;
    width: 100%;
}

.button-area button{
    text-transform: none;
    padding: 1rem 2rem;
    background: #2d2d2d;
    color: azure;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 800;
    border-radius: 5rem;
}
.button-area i{
    padding: 0 .5rem;
    font-size: 2rem;
}
.button-area button:hover{
    background: #4b5d67;
    color: #201f1f;
}
.button-area span{
    text-transform: none;
    margin: 1rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1a66f1b1;
    display: none; 
}
.contact .row form .box::placeholder{
    font-weight: 800;
}
.contact .row form .message{
    height: 15rem;
    resize: none;
}
.contact .row .content .title{
    text-transform: uppercase;
    color: azure;
    font-size: 3rem;
    padding-bottom: 2rem;
}
.contact .row .content .info h3{
    display: flex;
    text-transform: none;
    color: azure;
    align-items: center;
    font-size: 2rem;
    padding: 1rem 0;
    font-weight: 600;
}
.contact .row .content .info h3 i{
    padding-right: 1rem;
    color: goldenrod;
}

<<脚本.js>>

    const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area span ");

form.onsubmit = (e) => {
   e.preventDefault();
   statusTxt.style.color = "#1a66f1b1";
   statusTxt.style.display = "inline-block";

   let xhr = new XMLHttpRequest();
   xhr.open("POST", "message.php", true);
   xhr.onload = () =>{
        if(xhr.readyState == 4 && xhr.status == 200){
            let response = xhr.response;
            if(response.indexOf("Invalid email address!") || response.indexOf("Failed to send your message"))
            {
            statusTxt.style.color = "#ff4c29";    
            }
            else{
                form.reset();
                setTimeout(() => {
                    statusTxt.style.display = "none";
                }, 3000);   
            }
            statusTxt.innerText = response;
        }
   }
   let formData = new FormData(form);
   xhr.send(formData);

}

<<消息.php>>

    <?php
error_reporting(E_ERROR | E_PARSE);
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    
    if(!empty($email) && !empty($message)){
        if(filter_var($email,FILTER_VALIDATE_EMAIL)){
        $receiver = "acct4568@gmail.com";
        $subject = "From: $name <$email>";
        $body = "Name: $name\nEmail: $email\nPhone: $phone\n\nMessage: $message";
        $sender = "From: $email";

            if(mail($receiver, $subject, $body, $sender)){
                echo"Your message has been sent";
            }
            else{
                echo"Failed to send your message";
            }
        }
        else{
            echo"Invalid email address!";
        }
    }
    
?>

我希望有人可以帮助我解决这个问题。 谢谢你。

1 个解决方案

解决方案1
 0  2022-09-01 02:18:08

您的#1 的答案是：
您在 JavaScript 中使用了错误的indexOf() 。

如果未找到indexOf()则返回-1 ，否则返回0或更多（取决于索引号）。

您必须检查if (response.indexOf('failed message') !== -1) 。
不适用于if (response.indexOf('failed message')) 。

您的#2 的答案是：
提交表单事件后，在您的 HTML 中发送的文本消失了，再也不会从任何地方回来。 因此，您必须将此文本存储在您的 JS 文件中，并在表单提交事件触发但在 AJAX 请求之前设置.innerText 。

您所有更改的 JS 代码是：

const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area span ");
const sendingMsgText = 'Sending your message...';

form.onsubmit = (e) => {
   e.preventDefault();
   statusTxt.style.color = "#1a66f1b1";
   statusTxt.style.display = "inline-block";
   statusTxt.innerText = sendingMsgText;// always show sending message on click submit button but before AJAX.

   let xhr = new XMLHttpRequest();
   xhr.open("POST", "message.php", true);
   xhr.onload = () =>{
        if(xhr.readyState == 4 && xhr.status == 200){
            let response = xhr.response;
            // check response `indexOf()` with not `-1` do not check with just `.indexOf()` because `-1` will be matched if no error returns.
            if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
            {
                statusTxt.style.color = "#ff4c29";    
            }
            else{
                form.reset();
                setTimeout(() => {
                    statusTxt.style.display = "none";
                }, 3000);   
            }
            statusTxt.innerText = response;
        }
   }
   let formData = new FormData(form);
   xhr.send(formData);

}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的联系表格不起作用 我在 wordpress 网站加载联系表格 7 时遇到问题 如何编辑我之前使用联系表单创建的联系人？ 我在 JS DOM 中的表单验证有问题 是否可以在一种联系表单7中以一种形式具有两个具有不同重定向的提交按钮？ 我可以将我的 Firebase 联系表单放在 Angular 中吗？ 如何让我的联系表格在提交时发送电子邮件？ 如何与表单联系人一起使用reCAPTCHA？ 我无法重新加载我的联系表的验证码 我想用 Javascript 对我的联系表格进行简单的验证
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM