Unable to access input date values with javascript

Question

I've been using forms which upon submit call a function which makes use of the inputted data. So far this has worked fine with text, but switching to date inputs is causing me trouble.

I'm using the following code, but the "startDate", "endDate" values are empty.

<form onsubmit="myFunction()">
  Start Date:
  <input type="date" name="startDate" id="startDate">
  End Date:
  <input type="date" name="endDate" id="endDate">
  <input type="submit">
</form>

<!-- Form to process above date submit -->
<script>
  function myFunction() {

    var locationID = "1";
    var startDate = document.getElementById("startDate").value;
    var endDate = document.getElementById("endDate").value;
    var apiURL = "APIUrl" + locationID + "_" + startDate + "_" + endDate;
    alert("The form was submitted" + apiURL);

    $.get(apiURL, function( data ) {
      $( ".result" ).html( data );
    });
  }
</script>

The alert gives me back the APIUrl, plus the location ID, but blank values for the dates.

Any ideas?

Thanks for your help.

It works perfectly well here: JS Fiddle demo; do you have any reported errors in your console (F12 in most browsers)? — David Thomas
– David Thomas, Commented Jun 12, 2016 at 20:15
I ran your code in jsfiddle and it worked: jsfiddle.net/k15sxbua — arop
– arop, Commented Jun 12, 2016 at 20:15
Thanks for the responses, I'm using Chrome, I'm not seeing anything obvious in the console, but I have a fair amount of code, so I am going to remove anything that Isn't in the above question. — Xerphiel
– Xerphiel, Commented Jun 12, 2016 at 20:19
The <form> is still handling the submission itself. It will leave/unload the current page, which will automatically abort the Ajax request. Want html form submit to do nothing — Jonathan Lonowski
– Jonathan Lonowski, Commented Jun 12, 2016 at 20:29

isapir · Accepted Answer · 2016-06-12 20:16:56Z

1

You didn't specify what browser you are using.

Since you're already using jQuery, I recommend using it to retrieve the field values, i.e.

var startDate = $("#startDate").val();
var endDate   = $("#endDate").val();

That would resolve browser inconsistencies that could play a part in your issue.

answered Jun 12, 2016 at 20:16

isapir

24k16 gold badges127 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Thomas Over a year ago

The only inconsistencies I can imagine are in browsers that fail to implement the <input type="date" />, but in that case it defaults back to a type of text. Either way using the value property of the HTMLInputElement is cross-browser compatible.

isapir Over a year ago

The OP didn't specify which browser he uses. While I agree that value should not have any inconsistency issues -- if there were no issues then the OP wouldn't have posted his question in the first place.

j3ff · Accepted Answer · 2016-06-12 20:27:14Z

1

Your code work as expected in Chrome because it supports input date but this is not the case for IE, Firefox and Safari as you can see here : http://caniuse.com/#search=input%20date

It would probably be better if you use a library like JQuery-UI for the datepicker so it can be supported by all browsers

edited Jun 12, 2016 at 20:27

answered Jun 12, 2016 at 20:15

j3ff

6,2098 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

Unable to access input date values with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related