JQuery日期输入条件

JQuery date inputs condition

本文关键字：条件 输入 日期 JQuery      更新时间：2023-09-26

我有以下的JQuery函数是正常工作的:

$(function () {
    $('#accmenu').change(function() {
        $(".insightsgraphs div").hide();
        $(".insightsoptions input").removeClass("green");
        $("#newLikes").one('click', function () {
            $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    var json = response.replace(/"/g,'');
                    json = "[" + json + "]";
                    json = json.replace(/'/g,'"');
                    var myData = JSON.parse(json);
                    var myChart = new JSChart('dailyNewLikes', 'line');
                    myChart.setDataArray(myData);
                    myChart.setAxisNameX('');
                    myChart.setAxisNameY('');
                    myChart.setAxisValuesColorX('#FFFFFF');
                    myChart.setSize(470, 235);
                    myChart.setTitle('Daily New Likes');
                    myChart.draw();
                }});
            return false;
        });
        $("#unlikes").one('click', function () {
            $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    $("#dailyUnlikes").html(response);
                }});
            return false;
        });
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
        return false;
    });
    $("#unlikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyUnlikes').toggle();
        return false;
    });
});

但是我想创建一个条件:如果以下两个日期输入之一:

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

为空，我想接收一个警报，.one()函数只在满足条件时才执行。例如，当我在没有日期输入的情况下点击其中一个按钮时，我想收到一个警报，例如alert("One of the date or both missing")，在我选择日期并再次按下按钮以执行.one()函数，就像上面的例子一样。我希望我说得够清楚了。我知道我可以这样写:

if (until == "" || since == "") {
    alert("One of the date or both missing")
} else {}

但是我的尝试到目前为止都没有成功。可能我没有把条件放在它应该在的地方…此外，它也有可能与警报输入集中，突出显示或类似的东西?

编辑:这里有一个小提琴:http://jsfiddle.net/DanielaVaduva/ueA7R/6/我用其他东西替换ajax调用，而不修改流。

尝试使用:

检查您的值
if (until.trim().length === 0 || since.trim().length === 0) {
    //TODO here
}

我建议您检查输入中的name属性，并检查它是否与您检索输入值时使用的相同。

如果还是不行，试着调试一下，比如:

console.log(since);

并检查它是否正确获取您的值。

我不知道你是否想要这个(demo)。如果你的约会是空的，这是行不通的。AJAX调用将不能在JsFiddle上工作，因为您使用的是.serialize()，它通过URL发送信息，作为GET类型，您需要将其发送为POST。没关系。如果你已经准备好你的服务器接收一个GET方法，它将工作。

此外，我必须补充，如果你想改变颜色ONLY如果AJAX是成功的，你必须添加你的改变颜色的功能，我在演示中使用，如果你想检查你的日期，每次你想发送信息到服务器，改变.one()函数为.on()函数，并在AJAX成功后删除功能:

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

(更多关于删除函数的信息在这里);

我希望这至少能在你想做的事情上对你有所帮助。如果不是你想要的，请留下评论。

我不确定我是否完全理解这个问题，但是…你可以检查这个>>

<<p> 小提琴演示/strong>

HTML

为日期字段添加id，如

 <input id="until" type="date" name="until_date" value="Until date">
 <input id="since" type="date" name="since_date" value="Since date">

只是为了突出显示所需的日期>>

CSS 

.req{
   border:2px red solid;
}
.required{
   color:red;
   font-size: 0.8em;
   font-style:italic;
}
jQuery 

$(function () {
     //removing the highlighting class on change
      $('#until').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });
      $('#since').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });
    $('#accmenu').change(function() {
      var dSince= $('#since').val();
      var dUntil= $('#until').val();
      if(dSince=='' || dUntil==''){
         alert('You MUST select Both dates!');
         $(this).val(0); // Set the menu to the default 
         //Adding the Highlight and focus
         if(dSince==''){
             $('#since').addClass('req').after('<span class="required">- required *</span>').focus();}
         if(dUntil==''){
             $('#until').addClass('req').after('<span class="required">- required *</span>').focus();}           
      }else{
         $(".insightsgraphs div").hide();
         $(".insightsoptions input").removeClass("green");
         $("#newLikes").one('click', function () {
             $("#dailyNewLikes").html('</p>Test daily new likes</p>');
             return false;
          });
         $("#unlikes").one('click', function () {
              $("#dailyUnlikes").html('</p>Test daily unlikes</p>');
             return false;
         });
       }  //End of the if statement
   });
   $("#newLikes").on('click', function(){
      $(this).toggleClass('green');
      $('#dailyNewLikes').toggle();
      return false;
   });
   $("#unlikes").on('click', function(){
         $(this).toggleClass('green');
      $('#dailyUnlikes').toggle();
      return false;
   });
});

因此，当accmenu中的一个选项被选中时，它将检查两个DATE s的值，如果两个或任何一个都是空白，它将不执行该函数。

相关文章：