Question

这是我的代码：

function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();

document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>

<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>

<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">                    
</form>

<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
   <option id = "selectedMonth" selected="selected" value=""></option>

</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>

我使用简单的javascript自动填写表单输入“entryDate，selectedYear，selectedMonth”按实际日期以及其他脚本使用的其他日期。

我的问题是，当网站加载时，只会自动填充第一个输入 - 输入id = entryDate。

接下来的2个输入为空。但是，当我按F5并再次重新加载网站时，2个输入正确填充。

请您帮我修复一下，以便在首次加载网站时填写所有3个表单...

谢谢

Answer 1

您没有正确使用<select>和<option>。 <select>代表一个下拉列表，其中包含多个<option>元素。

<option>元素表示下拉列表中的选项。您使用<option>关闭</option>。无论BETWEEN是什么，标签都会出现在下拉列表中：

<option>Hello</option>   <!--user sees "Hello" as an option in the dropdown-->

另一方面，<option>的{{1}}属性包含在提交表单时，如果选择了该选项，将发送到服务器的字符串。您可以将此视为value的“真实”值：用户不会看到它，但它是重要的值。用户可以看到<option>和<option>之间的任何内容，但实际上并没有做任何事情。

通过为</option>属性设置selected，可以“选择”下拉选项的任何一个（即，在下拉列表中显示为所选选项） }（selected）。当用户选择一个选项时，会自动设置此属性（并清除其他选项上的selected="selected"属性）。

首先，让我们的selected下拉列表看起来正确。您需要手动提供一些年份作为选项：

selectedYear

请注意，您需要在每个<select id="selectedYear" name="year"> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> </select>的{{1}}属性中的代码和之间指定年份，如上所述。另请注意，我已将<option>移至value。很少有理由选择id的个人<select>;通常要修改下拉列表的选项，您应该选择<option>标记本身。

所以，让我们试试吧。我将重新创建上面的下拉列表，但我将使用JavaScript添加其选项：

<select>

<select>功能允许您在元素的开始标记（在本例中为<select id="selectedYear" name="year"></select> <script type="text/javascript"> var dropdown = document.getElementById('selectedYear'); var start_year = 2011; var end_year = 2013; for (var i = start_year; i <= end_year; i++) { dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>'; } </script>和结束标记（innerHTML）之间设置之间的HTML内容。

了解这一点，使用JavaScript选择所需的选项非常容易。请记住，您可以通过将<select id="selectedYear" name="year">的{{1}}属性设置为“已选中”来执行此操作。以下是</select>功能的一部分，显示了如何设置selected下拉列表的默认年份：

<option>

这应该足以让你入门。我希望这一切都有道理。

Answer 2

月份使用以下HTML -

<!-- HTML for month -->
<select id = "selectedMonth" name="month">
   <option  value="1">Jan</option>
   <option  value="2">Feb</option>
   <option  value="3">Mar</option>
   <option  value="4">Apr</option>
   <option  value="5">May</option>
   <option  value="6">Jun</option>
   <option  value="7">Jul</option>
   <option  value="8">Aug</option>
   <option  value="9">Sep</option>
   <option  value="10">Oct</option>
   <option  value="11">Nov</option>
   <option  value="12">Dec</option>
 </select>

 <!-- HTML for year -->
<select id="selectedYear" name="year">
   <option value="2010">2010</option>
   <option value="2011">2011</option>
   <option value="2012">2012</option>
   <option value="2013">2013</option>
</select>

和脚本

//script for setting month
var monthEl = document.getElementById('selectedMonth');
monthEl.options[m2].selected = "selected"

//for year 
var yearEl = document.getElementById('selectedYear');
yearEl.options[y].selected = "selected"

Answer 3

您正在通过其ID获取元素，因此第一次运行脚本时只会填充它找到的第一个元素（可能是第一个表单中的元素）。

由于你有几个要自动填写的元素，你应该在它们上设置类，并使用这些类来选择你感兴趣的类。例如：

<form id="form1">
    <input class="entryDate" type="text"> <!-- note the class=..." -->
</form>
<form id="form2">
    <input class="entryDate" type="text">
    <select name="mode" class="selectedMonth"> <!-- note the class=..." -->
        <option selected="selected" value=""></option>
        <option value="1">the money withdraw</option>
        <option value="2">the money income</option>
    </select>
</form>

现在你的代码应该是这样的：

window.onload = function setActualDate() {
    var d1 = new Date();
    var y = d1.getFullYear();
    var d = d1.getDate();
    var m1 = d1.getMonth() + 1;
    var m2 = d1.getMonth();
    var entryDates = document.getElementsByClassName('entryDate');
    var years = document.getElementsByClassName('selectedYear');
    var months = document.getElementsByClassName('selectedMonth');
    var i, j;
    for (i in entryDates)
    entryDates[i].value = (y + "-" + m1 + "-" + d);
    for (i in months) {
        for (j in months[i].options)
        if (months[i].options[j].value == m1) {
            months[i].options[j].selected = true;
            break;
        }
    }
    //similarly for years...
};

这是一个演示它的小提琴：http://jsfiddle.net/QDdAp/2/

使用javascript自动填写表单

3 个答案: