javascript - How to get value from onchange? - Stack Overflow

admin管理员组

文章数量:1291523

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" />

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" />

• javascript
• date
• onchange

Share Improve this question Follow edited Nov 19, 2015 at 19:46 AtheistP3ace 9,6911212 gold badges4545 silver badges4343 bronze badges asked Nov 19, 2015 at 19:14 Jnsn_Jnsn_ 15511 gold badge22 silver badges1414 bronze badges 3

• 2 Where are you adding the change listener? Where is dateEntered getting called? As written, this code doesn't make sense. – Evan Davis Commented Nov 19, 2015 at 19:18
• Yeah, I'm not seeing the relationship between dateEntered() and your inputs elements. How are you registering the onchange handler? We're missing some key elements to your code. – user47589 Commented Nov 19, 2015 at 19:24
• I had originally had the method dateEntered() in the input onchange, which I took out. I forgot about dealing with this function in the script! – Jnsn_ Commented Nov 19, 2015 at 19:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

Fiddle: http://jsfiddle/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;
        }
    }
);

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/o73fze9r/

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.

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

<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;

(function(){
    document.getElementById("fm_deliverydate").onchange =  function() {
       dateEntered();
    }
})();

function dateEntered(){
    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>

本文标签： javascriptHow to get value from onchangeStack Overflow