Question

我有一个内置的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。

当用户更改星期数时（我不想这样做），我无法找到一种干净的方式来记住这些数据，而无需将其发布到服务器。

谢谢！

Answer 1

定义您认为数据已更改并需要保存的事件。是在表单输入键盘输入事件还是更改事件上？
只需使用变量来保存该状态数据。就像： var state = [ {date: *somedate*, email: *someEmail*, name: *someName*, surname: *someSurname*}, {date: *someOtherDate*, email: *someEmail*, name: *someName*, surname: *someSurname*}, ];

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

Answer 2

检查此解决方案是否对您有帮助。

var weekOfYear = function(date){
   var d = new Date(+date);
   d.setHours(0,0,0);
   d.setDate(d.getDate()+4-(d.getDay()||7));
   return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};

在previousWeek，nextWeek和onchange输入中调用此函数。将用户导航到的星期与可用和不可用的单选按钮的数据一起存储在数组中。在与星期几相对应的数组中存储0（表示不可用）和1（表示可用）。因此，您的数组将具有七个值。

例如，

假设用户已导航到一年的第33周和第34周，将其存储为

[
   {33, [0, 0, 1, 0, 0, 1, 1]},
   {34, [1, 1, 1, 1, 0, 0, 1]} 
]

现在，当您调用weekOfYear函数时，请确实调用另一个函数来检查数组在一周中的存储值。如果您存储的数组中存在星期数，请填充单选按钮。

更改所选日期时记住表单值

2 个答案: