使用javascript自动填写表单

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的输入。

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

你能帮我解决这个问题吗?当网站第一次加载时，所有3张表格都会填满…

谢谢

Answer 1

您没有正确使用<select>和<option>。<select>表示一个dropdown，可以包含多个<option>元素。

<option>元素表示下拉列表中的一个选项。您可以使用</option>关闭<option>。标签之间的内容将出现在下拉列表中：

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

另一方面，当表单提交时，<option>的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>

注意，您需要在标签之间和每个的value属性中指定年份，如上所述。还请注意，我将id移到了<select>。很少有理由选择<option>的单个<select>；通常，要修改下拉列表的选项，您应该选择<select>标签本身。

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

<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函数允许您设置元素的开始标记(在本例中为<select id="selectedYear" name="year"> )和结束标记(</select>)之间的内容。

了解了这一点，使用JavaScript选择您想要的选项是相当容易的。请记住，您可以通过将<option>的selected属性设置为"selected“来完成此操作。下面是您的setActualDate函数的一部分，展示了如何仅为selectedYear下拉菜单设置默认年份：

<script type="text/javascript>
function setActualDate() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var dropdown = document.getElementById('selectedYear');

    //loop through the dropdown's options
    for (var i = 0; i < dropdown.options.length; i++) {
        var option = dropdown.options[i];

        //check if this is the option we want to set
        if (option.value == year) {
            option.selected = true;
        } else {
            //ensure all other options are NOT selected
            option.selected = false;
        }

        //NOTE: you can simplify the above if-else to just:
        //option.selected = (option.value == year);
    }
}
</script>

这应该足以让您入门了。我希望这一切都有意义。

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/