按下alert沒有反應

#html #網頁設計 #javascript #css #html #fqa #開合效果 #alert #js

kkylerrll 2023-05-25 23:17:36 ‧ 992 瀏覽

分享至

<!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">
    <title>餐廳訂位範本</title>

    <style>
        img {
            max-width: 100%;
            height: auto;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .slider-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 300px;
            /*調整滑軌間距*/
            margin-bottom: 10px;
        }

        .slider {
            width: auto;
        }

        form {
            margin: 0 auto;
            max-width: 600px;
        }

        .dashed-fieldst {
            border-style: dotted;
            cursor: pointer;

        }

        h1,
        p {
            text-align: center;
        }
    </style>
    <script>
        function submitForm() {
            // 取得表單資料
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var phone = document.getElementById("phone").value;
            var restaurant = document.getElementById("restaurant").value;
            var date = document.getElementById("date").value;
            var time = document.getElementById("time").value;
            var numberOfPeople = document.getElementById("numberOfPeople").value;
            var specialRequests = document.getElementById("specialRequests").value;

            // 假設這裡使用 AJAX 或其他方式將資料傳送到伺服器端進行處理

            // 清空表單
            document.getElementById("name").value = "";
            document.getElementById("email").value = "";
            document.getElementById("phone").value = "";
            document.getElementById("restaurant").value = "";
            document.getElementById("date").value = "";
            document.getElementById("time").value = "";
            document.getElementById("numberOfPeople").value = "";
            document.getElementById("specialRequests").value = "";

            // 提示訂位成功
            window.alert("您已訂位成功！");
ㄋ
        }

        // 驗證用餐日期是否為未來日期
        function validateDate() {
            var selectedDate = document.getElementById("date").value;
            var currentDate = new Date().toISOString().split('T')[0];

            if (selectedDate < currentDate) {
                alert("請選擇未來的用餐日期！");
                document.getElementById("date").value = "";
            }
        }

        // 設定過去日期為不可選取
        function disablePastDates() {
            var today = new Date().toISOString().split('T')[0];
            var dateInput = document.getElementById("date");

            dateInput.setAttribute("min", today);
        }
        // 滑軌範例
        function updateValue() {
            var slider1 = document.getElementById("mySlider");
            var output1 = document.getElementById("sliderValue");
            output1.innerHTML = slider1.value;
            var slider2 = document.getElementById("child");
            var output2 = document.getElementById("children");
            output2.innerHTML = slider2.value;
        }
        //設定成點擊 fieldset 就可以連結
        function selectCity(fieldset) {
            var radio = fieldset.querySelector('input[type="radio"]')
            radio.checked = !radio.checked;
        }

    </script>

<body onload="disablePastDates()">

    <form onsubmit="return submitForm()">
        <img src="https://img.freepik.com/free-photo/top-view-table-full-delicious-food-composition_23-2149141353.jpg">

        <h1>集團</h1>
        <p>歡迎蒞臨集團<br>有訂位需求的顧客，請填寫以下資訊</p>
        <fieldset>
            <legend>選擇訂位人數&時間</legend>

            <label for="people">用餐人數</label>
            <br>
            <div class="slider-container">
                <div class="slider">
                    <input type="range" id="mySlider" min="1" max="20" value="2" oninput="updateValue()">
                    <p><span id="sliderValue">2</span>位大人</p>
                </div>

                <div class="slider">
                    <input type="range" id="child" min="0" max="10" value="0" oninput="updateValue()">
                    <p><span id="children">0</span>位小孩</p>
                </div>
            </div>

            <br>

            <label for="date">用餐日期</label>
            <br>
            <input type="date" id="date" required onchange="validateDate()">
            <input type="time" id="time" required onchange="validateTime()">
            <br><br>

        </fieldset>
        <br><br>
        <hr>
        用餐地點
        <br><br>
        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="xitun" required>
            <label for="xitun">西屯店</label>
        </fieldset>

        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="nantun" required>
            <label for="nantun">南屯店</label>
        </fieldset>
        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="beitun" required>
            <label for="beitun">北屯店</label>
        </fieldset>

        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="central" required>
            <label for="central">中區店</label>
        </fieldset>

        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="east" required>
            <label for="east">東區店</label>
        </fieldset>
        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="west" required>
            <label for="west">西區店</label>
        </fieldset>
        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="south" required>
            <label for="south">南區店</label>
        </fieldset>
        <fieldset class="dashed-fieldst" onclick="selectCity(this)">
            <input type="radio" name="city" id="north" required>
            <label for="north">北區店</label>
        </fieldset>
        <br><br><br>
        <hr>

        <fieldset>
            <label for="name">訂位者姓名*</label>
            <br>
            <input type="text" name="name" id="name" placeholder="請輸入中文全名" required>
            <br>
            <input type="radio" name="mr" id="mr" checked>
            <label for="mr">先生</label>
            <input type="radio" name="ms" id="ms">
            <label for="ms">小姐</label>
            <input type="radio" name="other" id="other">
            <label for="other">其他</label>
            <br>

            <label for="phone">訂位者電話*</label>
            <br>
            <input type="tel" name="tel" id="phone" placeholder="請輸入電話" required>
            <br>

            <label for="email">訂位者Email</label>
            <br>
            <input type="email" name="mail" id="email">
            <br>

            <label for="note">其他備註</label>
            <br>
            <textarea name="notes" id="note" cols="45" rows="10"
                placeholder="有特殊需求嗎?可以先寫在這裡喔!例如:有不能吃的食材、行動不便、需兒童座椅"></textarea>
        </fieldset>
        <br><br>
        <hr>

        菜單
        <br>
        <img src="https://inline.imgix.net/menus/-MaSqx3P-coHdoIMveEZ:inline-live-2--MaSqxEF_Bfu1yep8uJB-38422bbc-2f0a-4c17-873d-d64e01563986.jpg"
            alt="菜單">
        <br><br><br>

        <input type="submit" value="提交" onclick="submitForm(); return false;">
    </form>

</body>

</html>

想問大家這段程式碼為甚麼按下submit後沒有反應

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2023-05-26 08:40:50 檢舉

你可以先自已善用一下F12來DEBUG一下。
會比來這問比較快。

窮嘶發發發 iT邦高手 1 級 ‧ 2023-05-26 16:52:31 檢舉

個人不建議用 window.alert() 事件，因為很多瀏覽器都會檔
建議改用 DIV 圖層顯示，你可以設計一個隱藏圖層，需要顯示訊息的時候，去改變DIV 的 CSS碼，讓他顯示到幕前，這樣會比較好，不只 alert() 事件還有 msg() 事件，這兩個都不該在使用，而且在很多的反廣告外掛，這兩個都是優先刪除的事件

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

rogeryao

iT邦超人 8 級 ‧ 2023-05-25 23:29:58

            // 提示訂位成功
            window.alert("您已訂位成功！");
ㄋ  <== 去除

    </script>
    </head>  <== 加入
<body onload="disablePastDates()">

Demo

回應 2
分享
檢舉

柯柯 iT邦新手 3 級 ‧ 2023-05-26 11:54:37 檢舉

一個ㄋ跟一個下巴造成的錯誤

IT界迷惘的賽門 iT邦新手 5 級 ‧ 2023-05-27 07:44:54 檢舉

rogeryao 大大真用心，發現了這個。

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙