jQuery datepicker: кнопка отключается, если в обоих полях ввода datepicker не выбрано значение - PullRequest
Новая
       14

jQuery datepicker: кнопка отключается, если в обоих полях ввода datepicker не выбрано значение

0 голосов
/ 10 марта 2011

Я использую jQuery datepicker, у меня есть два поля ввода datepicker, как показано ниже: 

<html>
<body>
    <form method=post>
        <input type=text id='start_date'> //datepicker field
        <input type=text id='end_date'>  // datepicker field
        <input type=submit value=Submit>
    </form>
</body>
</html>

Я хотел бы реализовать функцию, что кнопка отправки формы отключена, если оба поля ввода datepicker не выбранызначение даты из календаря выбора даты.

Если в обоих полях даты выбрано значение даты, кнопка включается автоматически.Как это реализовать?

Ответы [ 2 ]

1 голос
/ 10 марта 2011

не пытался увидеть, работает ли это, но что-то вроде этого, если у вас есть jquery

NEW answer: добавлен новый скрипт. 

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");

             var startDate = "";
             var endDate = "";
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    startDate = dateText;
                    if(endDate != ""){ ValidateDates(); }
                 }
             });
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    endDate = dateText;
                    if(startDate != ""){ ValidateDates(); }
                 }
             });

             function ValidateDates(){
                 //Validate the dateformats and remove the attribute
             };

         });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>

СТАРЫЙ ответ: 

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");
             $(".valDate").change(function(){
                if($("#start_date).val() != "" && $("#end_date").val() != ""){
                   //validation logic to see if the date is valid
                   $("#sumbit").removeAttr("disabled");
                }
            else{
               $("#sumbit").disabled("disabled", "disabled");
            }
         });
     });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>
1 голос
/ 10 марта 2011

Измените разметку «submit» на <input type="submit" value="Submit" disabled="disabled"/>, а затем удалите отключенное свойство в JavaScript, когда оба поля даты были выбраны.Обратите внимание, что пользователи с отключенным JavaScript получат другой опыт, поэтому вы должны защищаться от этого в коде, который получает форму.

Редактировать : добавлена ​​демоверсия для вас - http://jsfiddle.net/acxDU/:)

Редактировать 2 : Извините, я неправильно прочитал вопрос, и первая демонстрация не работала с средством выбора даты.Вот обновленное демо, которое работает с указателем даты jQuery http://jsfiddle.net/acxDU/2/

...