堆棧內存溢出
  簡體   English   中英

我的聯系表上有兩 (2) 個問題（練習）

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

 原文  2022-09-01 01:35:48  1   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