使用javascript自动填写表格答案

【问题标题】：Automatic form fill using javascript使用javascript自动填写表格
【发布时间】：2013-07-29 17:29:09
【问题描述】：

这是我的代码：

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 个表单...

谢谢

【问题讨论】：

您的<select> 下拉列表中应该有多个<option>。否则它们完全没用。
设置.value 为<option> 不填充<option> 可见内容，你也必须设置innerHTML

标签： javascript

【解决方案1】：

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

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

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

另一方面，<option> 的value 属性包含将在提交表单时发送到服务器的字符串（如果选择了该选项）。您可以将其视为<option> 的“真实”值：用户不会看到它，但它才是最重要的。用户可以看到 <option> 和 </option> 之间的任何内容，但实际上不会执行任何操作。

通过将selected 属性设置为selected (@987654336 @)。当用户选择一个选项时，该属性会自动设置（并且其他选项上的selected 属性会被清除）。

首先，让您的selectedYear 下拉菜单看起来正确。您需要手动提供一些年份作为选项：

<select id="selectedYear" name="year">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
</select>

请注意，您需要在标签之间的每个<option> 的value 属性中指定年份both，如上所述。另请注意，我将id 移至<select>。很少有理由从<select> 中选择一个<option>；通常要修改下拉菜单的选项，您应该选择 <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>) 之间设置 HTML 内容。

知道了这一点，就很容易使用 JavaScript 选择您想要的选项。请记住，您可以通过将<option> 的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>

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

【讨论】：

【解决方案2】：

您通过 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/

【讨论】：

感谢您的回答。我只纠正了一件事，它开始起作用了。我将 id 部分向右移动到 select 标记，它可以工作。

【解决方案3】：

使用以下 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"

【讨论】：