Get Html text input value into a Javascript function

Question

I'm creating a countdown timer for a user selected time. For that I have developed following function.

function countdownTimeStart(){

var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

var x = setInterval(function() {

    // Get to days date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML = hours + ": "
        + minutes + ": " + seconds + " ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo1").innerHTML = "EXPIRED";
    }
}, 1000);
 }

This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

Such as

<input type = "text" id = "picker-dates" value="08:30:20">

So can anyone help me to get this input value to my javascript function.

For what year/month/day? They are not defined in the element. — CertainPerformance, Apr 27 '18 at 07:50
You may want to use *type="date"* or *type="datetime-local"* instead of *type="text"* – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local — Patrick Hund, Apr 27 '18 at 07:55

score 3 · Accepted Answer · answered Apr 27 '18 at 07:58

3

First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.

function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
    // Get to days date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML = hours + ": "
        + minutes + ": " + seconds + " ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo1").innerHTML = "EXPIRED";
    }
  }, 1000);
}
 
 countdownTimeStart();

<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>

answered Apr 27 '18 at 07:58

Ankit Agarwal

30,378
5
37
62

The answer is very helpful, But there is a problem, the value 14:30:20. But the count start from another time. something like 6:42:20 – Chathuri Fernando Apr 27 '18 at 08:52
Because @ChathuriFernando you are using the difference time for count down timer as in your code `var distance = countDownDate - now;` you can simply set the `distance` with the value of `countDownDate` as `var distance = countDownDate` to get started from the user input value. – Ankit Agarwal Apr 27 '18 at 09:01
Should I use var distance = countDownDate instead of var distance = countDownDate - now; ? – Chathuri Fernando Apr 27 '18 at 09:10
@ChathuriFernando yes, If you want the timer to start from the input value – Ankit Agarwal Apr 27 '18 at 09:16
But then not countdown the time – Chathuri Fernando Apr 27 '18 at 09:44
Not working @Ankit Agarwal, please help me to solve it – Chathuri Fernando Apr 27 '18 at 09:45

score 0 · Answer 2 · edited Apr 27 '18 at 08:58

0

You can do like this, please have a look and if it doesn't work please let me know.

var selectedValue = document.getElementById("picker-dates").value;

edited Apr 27 '18 at 08:58

Rene Saarsoo

13,580
8
57
85

answered Apr 27 '18 at 07:55

Tanzeem Bhatti

219
2
3

@ChathuriFernando doing that much will not work. You need to add some more date operations to make it work – Ankit Agarwal Apr 27 '18 at 07:59
So can you please show the way for work my code since I'm new to the javascript – Chathuri Fernando Apr 27 '18 at 08:00
Here I'm not considering about the date or year, I just only need to count time for hour,minutes and seconds – Chathuri Fernando Apr 27 '18 at 08:02

score -1 · Answer 3 · answered Apr 27 '18 at 07:57

-1

use jquery: $('#picker-dates').val()

answered Apr 27 '18 at 07:57

zoly01

117
2

1

not everyone wants to use jquery - it's added mb to your site, as well as having to learn a slightly different syntax – treyBake Apr 27 '18 at 07:59

Get Html text input value into a Javascript function

3 Answers3