使用javascript自动填写表格 [英] Automatic form fill using javascript
问题描述
这是我的代码:
函数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>欢迎使用Money Logger！</h3>< form name ="enter" action ="enter.php" method ="post">进入<选择name ="mode">< option selected ="selected" value ="></option>< option value ="1">提款</option>< option value ="2">货币收入</option></select><输入id ="entryDate" type =日期" name ="entryDate"><输入type ="text" name ="entryName"><输入type ="text" name ="entryValue">< input type ="submit" value ="Enter"><输入类型=重置"值=清除"></form>< form name ="getEntry" action ="getEntry.php" method ="post">选择月份和年份以进行每月概览:<选择name ="month">< option id ="selectedMonth" selected ="selected" value ="></option></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> .< select> 代表一个下拉列表，其中可以包含多个< option> 元素.
< option> 元素代表下拉菜单中的一个选项.使用</option> 关闭< option> .标记之间的任何内容都会显示在下拉列表中:
< option> Hello</option><！-用户在下拉菜单中看到"Hello"作为选项-> 另一方面，如果选择了选项，则&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> 请注意，您需要在标签AND中的每个< option> 的 value 属性中分别指定年份 以上.还要注意，我将 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 函数可让您在元素的开始标记之间设置HTML内容 (在这种情况下，< select id ="selectedYear" name ="year> 和结束标记(</select> ).
知道了这一点，就很容易使用JavaScript选择想要的选项.请记住，您可以通过将< option> 的 selected 属性设置为"selected"来做到这一点.这是您的 setActualDate 函数的一部分，展示了如何为 selectedYear 下拉列表设置默认年份:
< script type ="text/javascript>函数setActualDate(){var d1 = new Date();var year = d1.getFullYear();var dropdown = document.getElementById('selectedYear');//循环浏览下拉菜单的选项for(var i = 0; i< dropdown.options.length; i ++){var option = dropdown.options [i];//检查这是否是我们要设置的选项如果(option.value ==年){option.selected = true;} 别的 {//确保未选择所有其他选项option.selected = false;}//注意:您可以将上述if-else简化为://option.selected =(option.value ==年);}}</script> 这应该足以让您入门.我希望这一切都有道理.
here is my code:
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>
I used simple javascript to automatically fill the form inputs "entryDate, selectedYear, selectedMonth" by actual date and some other dates used by the further scripts.
My problem is, that when the site is loaded, only first input is automatically filled - the input with id = entryDate.
The next 2 inputs are empty. But, when I press F5 and the site is reloaded again, the 2 inputs are filled correctly.
Could you please help me fix it to have all 3 forms filled when the site is loaded for the first time...
Thank you
You are not using <select> and <option> correctly. <select> represents a dropdown, which can contain multiple <option> elements.
An <option> element represents an option in the dropdown. You close an <option> with </option>. Whatever is BETWEEN the tags will appear in the dropdown:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
On the other hand, an <option>'s value attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the <option>: the user won't see it, but it's the one that matters. Whatever is between <option> and </option> is visible by the user, but doesn't actually DO anything.
Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a selected attribute set to selected (selected="selected"). When a user chooses an option, this attribute gets set automatically (and the selected attribute on the other options gets cleared).
So first of all, let's get your selectedYear dropdown looking right. You'll need to manually provide some years as options:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
Note that you need to specify the year both between the tags AND in each <option>'s value attribute, as explained above. Also note that I moved the id to the <select>. There's rarely a reason to select an individual <option> of a <select>; typically to modify a dropdown's options, you should select the <select> tag itself.
So, let's try that. I'll re-create the dropdown above, but I'll add its options using 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>
The innerHTML function lets you set the HTML content between an element's opening tag (in this case <select id="selectedYear" name="year"> and closing tag (</select>).
Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the selected attribute of the <option> to "selected". Here's a portion of your setActualDate function, showing how to set the default year for just the selectedYear dropdown:
<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>
That should be enough to get you started. I hope it all makes sense.
这篇关于使用javascript自动填写表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
