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](https://jsfiddle.net/davidThomas/wmtLaj31/); do you have any reported errors in your console (F12 in most browsers)? — David Thomas, Jun 12 '16 at 20:15
I ran your code in jsfiddle and it worked: https://jsfiddle.net/k15sxbua/ — arop, Jun 12 '16 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, Jun 12 '16 at 20:19
The `
` 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](https://stackoverflow.com/questions/3384960/want-html-form-submit-to-do-nothing) — Jonathan Lonowski, Jun 12 '16 at 20:29

j3ff · Answer 1 · 2016-06-12T20:27:14.793

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 '16 at 20:27

answered Jun 12 '16 at 20:15

j3ff

5,719
8
38
51

score 1 · Answer 2 · answered Jun 12 '16 at 20:16

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 '16 at 20:16

isapir

21,295
13
115
116

1

The only inconsistencies I can imagine are in browsers that fail to implement the ``, 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. – David Thomas Jun 12 '16 at 20:26
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. – isapir Jun 13 '16 at 23:30

Unable to access input date values with javascript

2 Answers2