Get date value in html5 using javascript

Question

I get this error "Cannot read property 'value' of null", please help to sort this out.I am trying to get the date values and passing to php. Thanks.

<form>
<label for="fromDate">From : </label><input id="from" type="date" id="fromDate" value=""></input>
<label for="toDate">To : </label><input id="to" type="date" id="toDate" value=""></input>

<input type="submit" value="submit"></input>
</form>
<input type="button" onclick="makeAjaxCall();return false;" value="Click to get data"></input>

<script>
function makeAjaxCall() {
    var frm = document.getElementById('fromDate').value;//$('#fromDate').datepicker("getDate");

    var to = document.getElementById('toDate').value;//$('#toDate').datepicker("getDate");
    var postDate ={
        "dateFrom" : frm,
        "dateTo" : to   
    };


  $.ajax({
            type:"POST",
            url:'test.php',
            data: postData,
            success: function(responseData) {

                     //someCode
                   }
    });
}

Answer 1

You have an input with two id's try using just one

<input type="date" id="toDate"

Instead of:

<input id="to" type="date" id="toDate"

Answer 2

Use a validator. Some of your elements have multiple id attributes. This is not allowed and is the cause of your problem.

(You probably intended to use a name attribute for the first id attribute in both cases)