Автосуммирование из 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 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@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

Решение