CODEWITHSUNDEEP
jqueryhtmldatekeyup
praks5432
praks5432

Reputation: 7792

Date input never null

I have this code 

$("#inputId").keyup(function(){
    alert($("#inputId").val());
});

I know this is fairly basic(I'm not exactly sure what to google), but I'd like to know why that alert is always a null string.

EDIT-

For some reason, this wasn't included.

What I meant was when I type in the field, the alert never shows anything- if this was imprecise, apologies, I meant the alert shows up, but it always shows a null string(so it should show what's in the date field after a key has lifted, but does not) . That's still happening with the fixed html below.

EDIT (follow up question)-

Cool, so I accepted one of the answers below. I'd like to make it so that regardless of what I type, the value comes up in the alert (not just when the entry is in the date format). How do I achieve this?

HTML CODE-

<div id = "container">
        <input type = "date" id = "inputId" class = "inputClass"><br /></input>
        <div id="deleteContainer"><span id="x">x</span></div>
</div>

Upvotes: 1

Views: 2089

Answers (4)

Split Your Infinity
Split Your Infinity

Reputation: 4229

I created a JSFiddle to test this and if you use and input type date then it should work.

Also changed $('#inputId') into $(this) which saves an extra query and is faster.

$("#inputId").keyup(function(){
    alert($(this).val());
});​

As you can see in the Fiddle using the keyup with a date field (in Chrome) won't return a value until the date is correct.

You can't change the behavior of the date field, but you have two options.

  • Change it into an input type text field and add your own validation.
  • Get the value when a user leaves the field (this is the 'blur' event in HTML or 'change' event in jQuery) and if the date is valid you get the value.

Here is a fiddle that demonstrates the change event instead of a keyup event.

Update Changed the fiddle to use input date

Upvotes: 2

Gabriel Santos
Gabriel Santos

Reputation: 4974

input are broken. Change

<input type = "date" id = "inputId" class = "inputClass"><br /></input>
                                                        ^^^^^^^^^^^^^^^

to

<input type = "date" id = "inputId" class = "inputClass">

Upvotes: 2

skovalyov
skovalyov

Reputation: 2099

This works fine:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <input id="inputId" type="text"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $("#inputId").keyup(function() {
            console.log($("#inputId").val());
        })
        </script>
    </body>
</html>

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

You have broken HTML:

<input type="date" id="inputId" class="inputClass"><br /></input>

should be:

<input type="date" id="inputId" class="inputClass" /><br />

Upvotes: 1

Related Questions