时间戳

首页 > 解决方案 > 更改选定日期时记住表单值

javascript - 更改选定日期时记住表单值

问题描述

我有一个用 HTML 构建的表单，如下所示：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function previousWeek() {
            var dateStr = document.getElementById("my_date").value;
            var date = new Date(dateStr);
            var datePreviousWeek = new Date(date.getFullYear(), date.getMonth(), date.getUTCDate() - 7);
            document.getElementById("my_date").value = datePreviousWeek.toISOString().slice(0, 10);
        }

        function nextWeek() {
            var dateStr = document.getElementById("my_date").value;
            var date = new Date(dateStr);
            var datePreviousWeek = new Date(date.getFullYear(), date.getMonth(), date.getUTCDate() + 7);
            document.getElementById("my_date").value = datePreviousWeek.toISOString().slice(0, 10);
        }
    </script>
    <style>
        .table {
            display: table;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
        }
    </style>
</head>
<body>
<p>Availability Form</p>
<button onclick="previousWeek()">Previous Week</button>
<input type="date" id="my_date" />    
<script type="text/javascript">
    var now = new Date();
    var daysUntilNextMonday = 7 - now.getDay() + 1;
    var nextMonday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + daysUntilNextMonday);
    document.getElementById("my_date").value = nextMonday.toISOString().slice(0, 10);
</script>
<button onclick="nextWeek()">Next Week</button>
    <form action="https://script.google.com/macros/s/AKfycbwVQja_SD4DTraHTWKH3rH81bveoIOB38U8PiSqiog/dev" method="post">
        <div class="row">
            <label>Email:</label>
            <input type="text" name="email" />
        </div>  
        <div class="row">
            <label>First Name:</label>
            <input type="text" name="firstName" />
        </div>
        <div class="row">
            <label>Last Name:</label>
            <input type="text" name="lastName" />
        </div>
        <div class="row">
            <div class="table">
                <div class="row">
                    <div class="cell">Available</div>
                    <div class="cell">Unavailable</div>
                </div>
                <div class="row">
                    <div class="cell">
                        <input type="radio" name="monday" value="available"/>
                    </div>
                    <div class="cell">
                        <input type="radio" name="monday" value="unavailable"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <input type="radio" name="tuesday" value="available"/>
                    </div>
                    <div class="cell">
                        <input type="radio" name="tuesday" value="unavailable"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <input type="radio" name="wednesday" value="available"/>
                    </div>
                    <div class="cell">
                        <input type="radio" name="wednesday" value="unavailable"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <input type="radio" name="thursday" value="available"/>
                    </div>
                    <div class="cell">
                        <input type="radio" name="thursday" value="unavailable"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <input type="radio" name="friday" value="available"/>
                    </div>
                    <div class="cell">
                        <input type="radio" name="friday" value="unavailable"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <input type="submit" value="Send" />
        </div>
    </form>

</body>
</html>

问题是当用户点击“下周”或“上一周”按钮时，我需要清除当前的单选按钮选择（不是大问题）。但是，当他们回到他们已经输入的一周时，我需要记住他们已经输入的内容。此外，我需要在 POST 请求中将所有数据（不仅仅是显示的星期）发送到我的 REST API。

当用户更改几周（我不想这样做）时，如果不将其发布到服务器，我就找不到一种干净的方法来记住这些数据。

谢谢！

标签： javascripthtml

解决方案

  1. 定义您的数据考虑更改并需要保存的事件。它是在表单输入 keyup 事件还是更改事件上？

  2. 只需使用一个变量来保存该状态数据。那将是： var state = [ {date: *somedate*, email: *someEmail*, name: *someName*, surname: *someSurname*}, {date: *someOtherDate*, email: *someEmail*, name: *someName*, surname: *someSurname*}, ];

最后，您可以将state对象作为发布数据和您将拥有的所有数据发送。

推荐阅读