How To Get Value From Onchange?

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 t

Solution 1:

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

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

var date = newDate();
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;
        }
    }
);

Solution 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 = newDate();
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;

functiondateEntered(){
    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"/>

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

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

Solution 3:

Try adding the event listener to the element instead, and firing your function when it changes. Try it out on jsFiddle. You could also consider adding a case where the date entered is lower than the current date. As of now you can enter a date in the past and still be able to enter a time.

<inputtype="date"name="DateName"id="fm_deliverydate" /><inputtype="time"name="TimeName"id="fm_deliverytime" /><script>var date = newDate();
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(){
    document.getElementById("fm_deliverydate").onchange =  function() {
       dateEntered();
    }
})();

functiondateEntered(){
    var userDateEntry = document.getElementById("fm_deliverydate").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>