Display value in input field doesn't work with JavaScript

Question

I was trying to display a value in an input field with vanilla Javascript, but weirdly, it didn't work until I used JQuery

Example with vanilla JS

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
var today = dd+'/'+mm+'/'+yyyy;
document.getElementsByName("plan_date").value = today;

<input name="plan_date" type="text">

And here same example with JQuery

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
var today = dd+'/'+mm+'/'+yyyy;
$('input[name=plan_date]').val(today);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="plan_date" type="text">

Can someone explain to me what am I getting wrong?

document.getElementsByName is plural. You need to add [0] or use `document.querySelector('input[name=plan_date]').value=today;` — mplungjan, Jul 12 '17 at 07:56

score 1 · Accepted Answer · answered Jul 12 '17 at 07:55

You almost Done .You missing to mention [0].because the name attribute is multiple selector of the element.so you could mention as 0.Then only its target the first element

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
var today = dd+'/'+mm+'/'+yyyy;
document.getElementsByName("plan_date")[0].value = today;

<input name="plan_date" type="text">

You have enough rep to vote to close as typo. It is not only a typo-type question, it is a huge duplicate — mplungjan, Jul 12 '17 at 07:57

score 1 · Answer 2 · answered Jul 12 '17 at 07:56

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
var today = dd+'/'+mm+'/'+yyyy;
document.getElementsByName("plan_date")[0].value = today;

<input name="plan_date" type="text">

document.getElementsByName returns an array of element with same name, so access like this document.getElementsByName("plan_date")[0].value = today;

score 0 · Answer 3 · edited Jul 13 '17 at 11:34

0

getElementsByName("plan_date") returns an array

try with

document.getElementsByName("plan_date")[0].value = today;

edited Jul 13 '17 at 11:34

mplungjan

169,008
28
173
236

answered Jul 12 '17 at 07:56

Cristian Programador

51
4

score 0 · Answer 4 · answered Jul 12 '17 at 07:59

0

It's because getElementsByName returns an array. So you could use document.getElementsByName("plan_date")[0].value = today; or add an id to the element like so:

document.getElementById("element_id").value = today

answered Jul 12 '17 at 07:59

tomr

171
1
8

Display value in input field doesn't work with JavaScript

4 Answers4