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

admin管理员组

文章数量:1291283

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...

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...

• javascript
• jquery
• forms

Share Improve this question Follow edited Jul 8, 2014 at 16:00 RbG 3,21333 gold badges3535 silver badges4545 bronze badges asked May 9, 2013 at 13:56 Daniela costina VaduvaDaniela costina Vaduva 1,89755 gold badges2020 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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');
        }
    });
});

<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

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./ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery./jquery-1.12.4.js"></script>
  <script src="https://code.jquery./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>

本文标签： how to check if input type date is empty or not using javascript or jqueryStack Overflow