CODEWITHSUNDEEP
jqueryinputtime
siamenock
siamenock

Reputation: 109

jquery: how to use value of <input type ="time">

I'm trying to create my own app on mobile, in Tizen OS. As it has an alarm function, I need to get the time from user. So, I put this code in HTML:

HTML part of 2nd page

   <div data-role="content">
        <p> room name : <div class = "roomNameOutput"></div></p>
        <p> your name  : <div class = "userNameOutput"></div></p>
        <p> zombie num : <input type = "number" id = "zombieNumInput"></input></p>
        <p> zombie time : <input type = "time" id = "zombieTimeInput"></input></p>
        <p> finish time : <input type = "time" id = "finishTimeInput"></input></p>
    </div>
    <div data-role="footer" data-position="fixed">
        <a href="#host_page1" data-role="button" id = "hostRefreshButton">Refresh</a>
        <a href="#join_page2" data-role="button" id = "hostStartButton">Start Game</a>
    </div>

HTML part of 3th page

  <div data-role="content">
    <h1>start game!</h1>
    <p> room name : <div class = "roomNameOutput"></div></p>
    <p> user name  : <div class = "userNameOutput"></div></p>
    <p> zombie num  : <div class = "zombieNumOutput"></div></p>
    <p> zombie time  : <div class = "zombieTimeOutput">zombieTimeOutput Default Text</div></p>
        <p> finish time : <div class = "finishTimeOutput"></div></p>
 </div>

JS

$("#hostStartButton").click(function(){
    zombieNum = $("#zombieNumInput").val();
    zombieTime= $("#zombieTimeInput").val();
    finishTime= $("#finishTimeInput").val();
    $(".zombieNumOutput").text(zombieNum);
    $(".zombieTimeOutput").html(zombieTime);
    $(".finishTimeOutput").text(finishTime);
    console.log("ZT==" + zombieTime);
    console.log($("#finishTimeInput").val());
});

zombieNum works well. I can get input of it and show it but, zombieTime doesn't.

on zombieNumOutput, zombieNum displayed well on zombieTimeOutput, zombieTime doesn't appear. and [zombieTimeOutput Default Text] dissapear.

<p> zombie num  : <div class = "zombieNumOutput"></div></p>
<p> zombie time  : <div class = "zombieTimeOutput">zombieTimeOutput Default Text</div></p>

furthermore, only "ZT==" and "" appear on console

console.log("ZT==" + zombieTime);
console.log($("#finishTimeInput").val());

Upvotes: 2

Views: 11180

Answers (3)

user2822542
user2822542

Reputation: 11

In case anybody else has troubles with input time: When testing hours and minutes have to be filled out, nut just hours. Otherwise the value is null for POST values as well as for JS.

Upvotes: 0

Gopal Joshi
Gopal Joshi

Reputation: 2358

Please Try below Example

HTML

<p>input time you want : <input type="time" id = "zombieTimeInput"/>
     </p><p><a id="hostButton">host</a></p>
<p id="zombieTimeOutput">Output</p>

JS

$("#hostButton").click(function(){

    zombieTime= $("#zombieTimeInput").val();
    $("#zombieTimeOutput").html(zombieTime);
    console.log("ZT == " + zombieTime);
});

JSfiddle

I have inserted new <p id="zombieTimeOutput">Output</p> and user .html property to show it. You can user any another controls instead of it.

Upvotes: 1

Luke Peterson
Luke Peterson

Reputation: 8861

There are three things wrong with your code:

  1. $("#hostStartButton") should be $("#hostButton").
  2. Add a closing </INPUT> tag after <input type="time" id="zombieTimeInput">
  3. Define zombieTimeOutput as my JSFiddle works when I comment out that line. Note you're targeting this as a class, not an ID as with the other elements.

Upvotes: 2

Related Questions