gpt4 book ai didi

javascript - 使用 javascript 自动填写表单

转载 作者:行者123 更新时间:2023-11-30 08:50:58 27 4
gpt4 key购买 nike

这是我的代码:

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>正确。 <select>代表一个下拉列表,可以包含多个<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>

请注意,您需要在标签之间和每个 <option> 中指定年份两者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> )) 之间设置 HTML 内容。

知道这一点后,使用 JavaScript 选择您想要的选项就非常容易了。请记住,您可以通过设置 selected 来完成此操作<option> 的属性到“选择”。这是您的 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>

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

关于javascript - 使用 javascript 自动填写表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17932263/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com