Автосуммирование из input.value

@pyramida · Регистрация: 14.07.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте.
В коде всплывающее окно "форма заказа".

HTML5
1
2
3
4
5
6
7
8
<div class="row">
            <label for="fromDate">Дату въезда:</label>
            <input type="text" class="form-control" id="fromDate" name="fromDate" readonly>
</div>
<div class="row">
            <label for="toDate">Дата выезда:</label>
            <input type="text" class="form-control" id="toDate" name="toDate" required readonly onclick="toDate()">
</div>

В ней два input в которые вставляется выбранная дата используя datapicker

JavaScript
1
2
3
4
$( function() {
    $( "#fromDate" ).datepicker();
    $( "#toDate" ).datepicker();
  } );

Третий input куда хочу вставлять количество дней из выбранных дат.

HTML5
1
2
3
4
<div class="row">
            <label for="allDay">Количество дней:</label>
            <input type="text" id="allDay" value="111" onclick="myFunction()" readonly>
</div>

Даты выглядят так "27.04.2018"
У меня получается только сделать по событию onclick="myFunction()" используя функцию

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
  function myFunction() {    
    var x = document.getElementById("fromDate").value;
    var x1 = document.getElementById("toDate").value;
    var d = count_diff(x1, x);
    document.getElementById("allDay").value = d;
    }  
/* функция счета дней */
function count_diff(d1, d2){
var date_1 = new Date(parseInt(d1.substr(6, 4), 10), parseInt(d1.substr(3, 2), 10), parseInt(d1.substr(0, 2), 10)); 
var date_2 = new Date(parseInt(d2.substr(6, 4), 10), parseInt(d2.substr(3, 2), 10), parseInt(d2.substr(0, 2), 10)); 
return ((date_1-date_2)/86400000);
}

Что нужно изменить, чтобы в input type="text" id="allDay" без использования onClick данные попадали при вводе второй даты?
Использовать setInterval и проверять каждую секунду? Не будет ли большой нагрузкой для устройства?
Посоветуйте что нибуть?

@klopp · 08.04.2018, 16:38

попробуйте onclick="myFunction()" вставить в <input id="toDate"> вместо onclick="toDate()"
если onclick="toDate()" тоже нужен,то используйте addEventListener

@pyramida · 08.04.2018, 17:28 **[ТС]**

Сообщение от klopp

попробуйте onclick="myFunction()" вставить в <input id="toDate"> вместо onclick="toDate()"

onclick="toDate()" был ошибочен. Я его убрал. Вставил myFunction() тоже самое. Можно видео посмотреть. Просто так не вставляется. Даю ссылку

https://www.youtube.com/watch?... e=youtu.be

Сообщение от klopp

если onclick="toDate()" тоже нужен,то используйте addEventListener

не совсем понимаю как? Функция работает по клику в теле, а как это будет делаться? Специально тыкать мышкой? Никто же не будет

Мне нужно, чтобы при заполнении обеих дат, в поле "количество дней" была цифра количества. То, что в видео происходит по клику на самом поле ввода.

@Mr_Sergo · 08.04.2018, 19:13

Сообщение от pyramida

Мне нужно

Я не совсем понял что вы хотите, но если я правильно понял то вы хотите что-то типа такого, если да то я бы сделал примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<label for="fromDate">Дату въезда:</label>
<select id="fromDate">
    <option value="24.04.2018">24.04.2018</option>
    <option value="23.04.2018">23.04.2018</option>
    <option value="22.04.2018">22.04.2018</option>
</select>
<br>
 
<label for="toDate">Дата выезда:</label>
<select id="toDate">
    <option value="27.04.2018">27.04.2018</option>
    <option value="26.04.2018">26.04.2018</option>
    <option value="25.04.2018">25.04.2018</option>
</select>
<br>
 
<label for="allDay">Количество:</label>
<input id="allDay" readonly>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
onChangee();
 
function onChangee(){
    document.getElementById('toDate').onchange=function(){ myFunction(); }
    document.getElementById('fromDate').onchange=function(){ myFunction(); }
 
    function myFunction() {    
        var x = document.getElementById("fromDate").value;
        var x1 = document.getElementById("toDate").value;
        var d = count_diff(x1, x);
        document.getElementById("allDay").value = d;
    }
    /* функция счета дней */
    function count_diff(d1, d2){
        var date_1 = new Date(parseInt(d1.substr(6, 4), 10), parseInt(d1.substr(3, 2), 10), parseInt(d1.substr(0, 2), 10)); 
        var date_2 = new Date(parseInt(d2.substr(6, 4), 10), parseInt(d2.substr(3, 2), 10), parseInt(d2.substr(0, 2), 10)); 
        return ((date_1-date_2)/86400000);
    }
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body{margin: 0px;background-color: #d8d8d8;}
 
select,#allDay{
    width: 20%;
    height: 30px;
    margin: 20px 0px 0px 0px;
    border: 1px;
    border-radius: 10px;
    outline:  none;
    color: #000;
    font-family: Comic Sans MS;
    border: 1px solid #fff;
    letter-spacing: 2px;
    font-size: 20px;
}

Не использовал бы onclick, а использовал бы onchange. Ну и событие бы вешал не в HTML а в JS.
Вот смотрите

@pyramida · 08.04.2018, 19:58 **[ТС]**

Сообщение от zlojnaxa

Не использовал бы onclick, а использовал бы onchange. Ну и событие бы вешал не в HTML а в JS.

Красавчик! :-) В input.toDate я повесил onchange="myFunction()" и все заработало как надо.
Спасибо, настоящий друг! :-)

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	08.04.2018, 16:38
	попробуйте `onclick="myFunction()"` вставить в `<input id="toDate">` вместо `onclick="toDate()"` если `onclick="toDate()"` тоже нужен,то используйте `addEventListener` 0

Автосуммирование из input.value

Решение