2

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

4

3 回答 3

6

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

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

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

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

通过将属性设置为( ) ，可以“选择”任何一个下拉选项（即，在下拉列表中作为所选选项可见）。当用户选择一个选项时，该属性会自动设置（并且其他选项上的属性会被清除）。selectedselectedselected="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函数允许您在元素的开始标记（在本例中为结束标记 ( )）之间设置 HTML 内容。<select id="selectedYear" name="year"></select>

知道了这一点，就很容易使用 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>

这应该足以让你开始。我希望这一切都有意义。

于 2013-07-29T19:44:05.090 回答
0

使用以下 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"
于 2013-07-29T19:32:45.070 回答
0

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

于 2013-07-29T19:38:54.457 回答