How to get value from onchange?

Question

Hi I basically am trying to disable another input field if the day is set to today from another input field (date). I can't seem to force an onchange onto an input field and grab that value into a variable to make this work.

I've had success placing the onchange(this) onto the input field but I have to take it out and force a JS onchange onto it instead.

I've tried the following code. As you can see, it is supposed to do something when the time is past 10am and the date is selected as today:

<script>
    var date = new Date();
    var dd = date.getDate();
    var mm = date.getMonth()+1;
    var yyyy = date.getFullYear();
    var hrs = date.getHours();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    }

    date = yyyy+'-'+mm+'-'+dd;


    var userDateEntry = document.getElementById("fm_deliverydate").onchange().value;

    if (hrs >= 10 && userDateEntry == date) {
        alert("Shipping for today has ended. Your order will arrive tomorrow");
        document.getElementById('fm_deliverytime').disabled= true;
    }
    else{
        document.getElementById('fm_deliverytime').disabled= false;
    }
</script>

<input  type="date" name="DateName" id="fm_deliverydate" />

<input  type="time" name="TimeName" id="fm_deliverytime" />

Answer 1

You aren't attaching the event correctly. You attach an event using addEventListener.

Fiddle: http://jsfiddle.net/AtheistP3ace/125jnvwp/1/

var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
var hrs = date.getHours();

if (dd < 10) {
    dd = '0' + dd
}

if (mm < 10) {
    mm = '0' + mm
}

date = yyyy + '-' + mm + '-' + dd;

var userDateEntry = document.getElementById("fm_deliverydate");
userDateEntry.addEventListener('change',
    function () {
        if (hrs >= 10 && userDateEntry.value == date) {
            alert("Shipping for today has ended. Your order will arrive tomorrow");
            document.getElementById('fm_deliverytime').disabled = true;
        } else {
            document.getElementById('fm_deliverytime').disabled = false;
        }
    }
);

Answer 2

If you wanted to add the onclick event listener to the html then you really only need to remove the onchange method you have attached in your dateEntered function and move it to the html, nothing else changes then.

var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
}
date = yyyy+'-'+mm+'-'+dd;

function dateEntered(){
    var userDateEntry = document.getElementById("fm_deliverydate").value;

    if (hrs >= 10 && userDateEntry == date) {
        document.getElementById('fm_deliverytime').disabled = true;
    } else {
        console.log('shipping enabled');
        document.getElementById('fm_deliverytime').disabled = false;
    };
}

Your html would look like this:

<input  onchange="dateEntered()" type="date" name="DateName" id="fm_deliverydate" placeholder="yyyy-mm-dd"/>

<input  type="time" name="TimeName" id="fm_deliverytime" placeholder="enter date"/>

Here's the fiddle: https://jsfiddle.net/o73fze9r/