JQuery входы дата состояние

Question

Я имею следующую функцию 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 {} 

но мои попытки пока не увенчались успехом. Вероятно, я не поставил условие, в котором он должен ... Также возможно также с предупреждением, что входы будут сфокусированы, выделены или что-то подобное?

EDIT: Вот скрипка с ним: http://jsfiddle.net/DanielaVaduva/ueA7R/6/ я заменить вызов Ajax с чем-то другим, не изменять поток.

Answer 1

Попробуйте проверить свои значения с:

if (until.trim().length === 0 || since.trim().length === 0) { 
    //TODO here 
} 

Я предлагаю вам, что проверить атрибут name в ваших входах и убедитесь, что это то же самое, что вы используете, когда вы запрашиваете значение входов.

Если он все еще не работает, попробуйте некоторые «отладки», как:

console.log(since); 

И проверить, если он получает свою ценность должным образом.

UPDATE

Я не знаю, если вы хотите это (demo). Если ваши даты пустые, это не сработает. Вызов AJAX не будет работать на JsFiddle, потому что вы используете .serialize() и отправляет информацию по URL-адресу, как тип GET, и вам необходимо отправить его как POST. Это не имеет значения. Если вы уже подготовили свой сервер для получения метода GET, он будет работать.

Кроме того, я должен добавить, что если вы хотите изменить цвет ТОЛЬКО если 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'); 

(Больше информации об удалении функции here);

Я надеюсь, что это поможет вам по крайней мере по пути, который вы хотите сделать. Оставьте комментарий, если это не то, что вы хотели.

Answer 2

Я не уверен, если я точно понял вопрос, но .. вы можете проверить это >>

Fiddle Demo

HTML

Добавить идентификаторы в поле даты как

<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, если оба или все пустое, оно не будет exe Симпатичная функция.