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
– CertainPerformance, Commented Apr 27, 2018 at 7:50
You may want to use type="date" or type="datetime-local" instead of type="text" – developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… — Patrick Hund
– Patrick Hund, Commented Apr 27, 2018 at 7:55

Ankit Agarwal · Accepted Answer · 2018-04-27 07:58:49Z

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, 2018 at 7:58

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chathuri Fernando Over a year ago

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

Ankit Agarwal Over a year ago

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.

Chathuri Fernando Over a year ago

Should I use var distance = countDownDate instead of var distance = countDownDate - now; ?

Ankit Agarwal Over a year ago

@ChathuriFernando yes, If you want the timer to start from the input value

Chathuri Fernando Over a year ago

But then not countdown the time

|

Rene Saarsoo · Accepted Answer · 2018-04-27 08:58:33Z

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, 2018 at 8:58

Rene Saarsoo

14k10 gold badges63 silver badges91 bronze badges

answered Apr 27, 2018 at 7:55

Tanzeem Bhatti

2292 silver badges3 bronze badges

3 Comments

Ankit Agarwal Over a year ago

@ChathuriFernando doing that much will not work. You need to add some more date operations to make it work

Chathuri Fernando Over a year ago

So can you please show the way for work my code since I'm new to the javascript

Chathuri Fernando Over a year ago

Here I'm not considering about the date or year, I just only need to count time for hour,minutes and seconds

zoly01 · Accepted Answer · 2018-04-27 07:57:31Z

-1

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

answered Apr 27, 2018 at 7:57

zoly01

1272 bronze badges

1 Comment

treyBake Over a year ago

not everyone wants to use jquery - it's added mb to your site, as well as having to learn a slightly different syntax

Collectives™ on Stack Overflow

Get Html text input value into a Javascript function

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related