CODEWITHSUNDEEP
javascripthtmluser-input
Chathuri Fernando
Chathuri Fernando

Reputation: 972

Get Html text input value into a Javascript function

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.

Upvotes: 1

Views: 340

Answers (3)

Tanzeem Bhatti
Tanzeem Bhatti

Reputation: 219

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;

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 3

zoly01
zoly01

Reputation: 127

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

Upvotes: -1

Related Questions