Javascript onchange not changing multiple times

Question

I am using a library called pickadate/pickatime. http://amsul.ca/pickadate.js/time/

here is the code:

<select id="day" onchange="myFunction()">
    <option value="[7,30]">Day 1</option>
    <option value="[8,00]">Day 2</option>
    <option value="[10,20]">Day 3</option>
</select>
<input type="text" id="time">

<script>
var value = document.getElementById('day').value;
function myFunction() {
    $('#time').pickatime( {
        min: value // minimum time
    });
}
</script>

let me explain what the code does.

every time the select changes, the onchange myFunction() should fire. it does on the first time. that's the problem. If I first select day 2, it will insert the min value [8,00] in the javascript function.

if i DO NOT refresh the page and select day 1 or day 3 after i have already selected something, it will not update the min value. how can i fix this?

EDIT: The problem: i'm initializing $('#time').pickatime... the first time. how can i reinitialize it or refresh it?

Replaced your functions body with a console.log(), gets called every time the select changes. Seems to be a problem with your pickatime method. https://jsfiddle.net/nosh9Lwu/ — Ken, Apr 21 '17 at 22:07
@Ken Yes, the problem is i'm initializing $('#time').pickatime, i cannot reinitialize it or refresh it? — Jason Bale, Apr 21 '17 at 22:08
Since you are already using JQuery, [this](http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange) might help — gaheinrichs, Apr 21 '17 at 22:09
how about $(document).on("change",'#day',function(){ ... }); — silverfighter, Apr 21 '17 at 22:09
...Obviously, but you didnt include it in your code snippet and it doesnt appear to be part of jQuery or JS. — Ken, Apr 21 '17 at 22:11
@gaheinrichs i think its the initializing of the `pickatime`. i need to refresh it or reinitialize it — Jason Bale, Apr 21 '17 at 22:11
@ken its a library. i have a link in the op. it is definitely working the first onchange. it does not work afterwards... — Jason Bale, Apr 21 '17 at 22:12
@silverfighter i think its the initializing of the `pickatime`. i need to refresh it or reinitialize it — Jason Bale, Apr 21 '17 at 22:12

score 0 · Answer 1 · answered Apr 21 '17 at 22:17

0

$('#time').pickatime();
var element = document.getElementById('day');
function myFunction() {
    $('#time').pickatime( {
        min: element.value // minimum time
    });
}

answered Apr 21 '17 at 22:17

gaheinrichs

565
5
13

score 0 · Answer 2 · answered Apr 21 '17 at 22:17

0

You need to clear time input value. Try like below;

 $('input[type="time"]').val(null);

answered Apr 21 '17 at 22:17

eisbach

417
3
7

Javascript onchange not changing multiple times

2 Answers2