Automatic form fill using javascript

Question

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

1

setting `.value` for ` – Moazzam Khan Jul 29 '13 at 19:18

score 6 · Accepted Answer · edited Nov 15 '19 at 17:00

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.

score 0 · Answer 2 · answered Jul 29 '13 at 19:32

Use the following HTML for month -

<!-- 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>

and script

//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"

score 0 · Answer 3 · answered Jul 29 '13 at 19:38

You are getting the elements by their ID so the first time the script runs only fills out the first elements it finds (probably the ones in the first form).

Since you have several elements to fill out automatically, you should be setting classes to on them and use these classes to select the ones you are interested in. For example:

<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>

Now your code should be something like this:

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...
};

Here's a fiddle demonstrating it: http://jsfiddle.net/QDdAp/2/

Thank you for your answers. I corrected only one thing and it started to work. I move the id section right to the select tag and it works. — Strimer_SK, Jul 29 '13 at 21:43

Automatic form fill using javascript

3 Answers3

Linked