CODEWITHSUNDEEP
javascriptjqueryforms
Daniela costina Vaduva
Daniela costina Vaduva

Reputation: 1897

how to check if input type date is empty or not using javascript or jquery

I have the following HTML form:

<form id="ChartsForm">
    <div id="dateoptions">
        <p>Until date: <input type="date" name="until_date" value="Until date"></p>
        <p>Since date: <input type="date" name="since_date" value="Since date"></p>
    </div>
    <div class="insightsoptions">
        <input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes">
        <input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes">
    </div>
</form>

and the following JQuery script:

$(function () {
    $("#newLikes").one('click', function () {
        $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
            function(response) {
                alert(response);
                $("#dailyNewLikes").html(response);
            }});
        return false;
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
    });

How do I check if the inputs "until_date" and "since_date" are empty or not in the first place and if they are empty to stop the script before it executes the ajax call, alert the user about the mistake and then continue if the inputs are not empty anymore. I have to use .one(). I've tried with the .blur() function but with no effect...

Upvotes: 1

Views: 16422

Answers (3)

user3703182
user3703182

Reputation: 11

Finally got it 

    
$(function() {
    $( "input[name^=datepicker]" ).datepicker({
    onSelect: function(dateText, inst) {
if   ($("input[name='datepicker_end']").val()!=""){    
if($("input[name='datepicker']").val()>$("input[name='datepicker_end']").val()){
alert("invalid date");

}

    }

}

});

})
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<p>Date: <input type="text" id="datepicker" name="datepicker"></p>
 
 <p>Date: <input type="text" id="datepicker_end" name="datepicker_end"></p>

</body>
</html>

Upvotes: 1

RbG
RbG

Reputation: 3193

<script type="text/javascript">
if (document.forms["form_name"]["date_field_name"].value == "" || document.forms["form_name"]["date_field_name"].value == "1970-01-01") 
{
        alert('you missed to give date.');
        return false;
}
</script>

in this case you will need to give a name to your form

Upvotes: 1

Andrew
Andrew

Reputation: 358

Instead of using one() you could remove the handler upon success. If you need just the one function removed afterwards you could either use namespaced events (or a named function rather than an anonymous one). You could do something like this:

$("#newLikes").on('click', function () {

    var until = $('#dateoptions input[name="until_date"]').val();
    var since = $('#dateoptions input[name="since_date"]').val();

    if (until == "" || since == "") {
        alert('Error; until date or since date is missing.');
        return;
    }

    $.ajax({
        type:'GET',
        url: 'newLikes.php',
        data: $('#ChartsForm').serialize(),
        success: function(response) {
            $("#dailyNewLikes").html(response);
            $("#newLikes").off('click');
        }
    });
});

Upvotes: 5

Related Questions