Изменение input в зависимости от значения другого input-а

@endangered28 · Регистрация: 11.10.2017

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

Добрый день. Нужна помощь,я javascript почти не знаю, а есть задача:
в форме input пользователь вводит сумму, и в другом поле сразу рассчитывается эта сумма минус 2% от нее. Может кто помочь?
Я форумы облазил, нашел только как просто рассчитывать 2% от введенной суммы, но она тоже коряво работает

@LFC · 11.10.2017, 09:51

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2%</title>
    <script src="script.js" defer></script>
</head>
<body>
     <p>
        Введите число <input type="text" name="" id="inp">
        <button onclick="calc()">Calculate</button>
    </p>
    <p id="out"></p>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function calc(){
    var inp = document.getElementById('inp').value;
    var out = document.getElementById('out');
    var res = Number(inp);
    if(isNaN(res)){
        out.innerHTML = 'Неправильный ввод данных!';
        return;
    }
    res -= res / 100 * 2;
    out.innerHTML = res;
}

@endangered28 · 11.10.2017, 12:33 **[ТС]**

Спасибо! А как сделать, чтобы без кнопки рассчитывало, сразу в другой инпут? Как то с использованием onekeydown?

Добавлено через 2 часа 24 минуты
Никто не знает как сделать?(

@j2FunOnly · 11.10.2017, 12:49

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

Никто не знает как сделать?(

Где вы такие задания получаете?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input id="x" type="number" value="0">
    <input id="y" type="text" value="0" disabled>
    <script type="text/javascript">
      x.addEventListener('input', function () {
        y.value = (this.value * .98).toFixed(2);
      });
    </script>
  </body>
</html>

@endangered28 · 11.10.2017, 14:35 **[ТС]**

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

Где вы такие задания получаете?

На работе)

Добавлено через 1 час 42 минуты
А input с атрибутом disabled не может обрабатываться в другом файле? У меня просто в обработчике реквестится $sum = intval($_REQUEST['имя инпута']); , а с disabled не работает

@j2FunOnly · 11.10.2017, 14:59

Поле ввода с атрибутом disabled не является корректным и не обрабатывается формой при отправке. Как вариант поставить атрибут readonly, либо дублировать полем с типом hidden и таким же именем. ИМХО не стоит полагаться на эти данные, а рассчитывать их на сервере.

@endangered28 · 17.10.2017, 12:13 **[ТС]**

Код в IE 11 не работает, есть какие нибудь аналоги? или мб как нибудь можно по другому сделать?

@j2FunOnly · 17.10.2017, 12:57

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

Код в IE 11 не работает

Какой код?

@endangered28 · 18.10.2017, 12:51 **[ТС]**

JavaScript
1
2
3
4
5
<script type="text/javascript">
      x.addEventListener('input', function () {
        y.value = (this.value * .98).toFixed(2);
      });
    </script>

Не рассчитывает сумму с учетом 2%комиссии

Добавлено через 23 часа 50 минут
И все-таки, можно как нибудь сделать, чтоб в IE тоже работало?)

@j2FunOnly · 18.10.2017, 13:16

Так а что не работает-то?

Мой пример прекрасно себя чувствует в IE 11.

А этот кусок гокода нигде работать не будет.

@endangered28 · 18.10.2017, 13:18 **[ТС]**

Всмысле, так это ж Ваш код?

@j2FunOnly · 18.10.2017, 13:27

Это только кусок от моего примера и сам по себе он работать не будет. Весь пример работает в IE 11.

Это раньше были ограничения на событие input - первое что подсказал мой знакомый телепат, но увы его способности на этом заканчиваются.

Поэтому дайте минимально полную +воспроизводимую+ проблему (разметка, js, стили, библиотеки подключаемые, ошибки в консоли - вот это вот всё) отображающий вашу проблему или ссылку на jsfiddle.net с кодом который не работает только в IE. Тогда и посмотрим что там может не работать.

@endangered28 · 18.10.2017, 13:32 **[ТС]**

Я сейчас сделал отдельно файл c этим кодом

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input id="x" type="number" value="0">
    <input id="y" type="text" value="0" disabled>
    <script type="text/javascript">
      x.addEventListener('input', function () {
        y.value = (this.value * .98).toFixed(2);
      });
    </script>
  </body>
</html>

и открыл в IE 11(только что скачал последнюю версию) - во втором поле ничего не меняется

@j2FunOnly · 18.10.2017, 13:43

В консоли что-то есть?

@endangered28 · 18.10.2017, 13:44 **[ТС]**

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

В консоли что-то есть?

нет, смотрел уже, пусто

@j2FunOnly · 18.10.2017, 13:48

Тут заработает https://jsfiddle.net/eftutnu0/
Вы открываете файл с жесткого диска - IE будет блокировать выполнение JS (по умолчанию)

Изменение input в зависимости от значения другого input-а

- видели такое у себя в браузере?

@endangered28 · 18.10.2017, 13:52 **[ТС]**

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

Вы открываете файл с жесткого диска - IE будет блокировать выполнение JS (по умолчанию)

Так в чем дело было, я видимо автоматом закрывал эти оповещения. Странно, что другие js скрипты работают, но это уже не суть. Спасибо,что разрешили проблему!)

@j2FunOnly · 18.10.2017, 13:57

Вот видите какие нюансы бывают, вплоть до того как вы файлы открываете

А просите попытаться решить проблемы приведя только кусочек кода (и то по-требованию).

@endangered28 · 18.10.2017, 14:32 **[ТС]**

Блин, отключил в IE блокировку ActiveX и других элементов, но все равно на моей странице не работает, может быть дело в подключении js на странице? Вот овнокод index.php. Может в подключении js где то косяк? хотя в других браузерах работает же

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<?
define('CHECK_OFERTA', 'HAS_AM');
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
CModule::IncludeModule("iblock"); 
\Bitrix\Main\Loader::includeModule('iblock');
?>
<?
$arAgency = \Litegroup\CatalogStoreProduct::getAgencyData();
$APPLICATION->SetTitle("Пополнение лицевого счёта в " . $arAgency['NAME']);
//$file = $_SERVER['DOCUMENT_ROOT']."/upload/logs/".md5('Errors').".log";
?>
<style>
 
 
input:focus {
        -webkit-box-shadow: 0px 0px 8px #007eff;
        -moz-box-shadow: 0px 0px 8px #007eff;
        box-shadow: 0px 0px 8px #007eff;
}
 
input.date_err {
    box-shadow: 0 0 8px #ff0000;
}
 
input.date_ok {
    box-shadow: 0 0 8px #3caa3c;
}
 
.error{
  color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-ru-1251.js"></script>
 
<script language="JavaScript">
    function ValidateDate(date_fl){
        str=date_fl.value;
        function TstDate(){
            str2=str.split(".");
            if(str2.length!=3){return false;}
            //Границы разрешенного периода
            if((parseInt(str2[2], 10)<=1920)||(parseInt(str2[2], 10)>=2020)) {return false;}
            str2=str2[2] +'-'+ str2[1]+'-'+ str2[0];
            if(new Date(str2)=='Invalid Date'){return false;}
            return str;
        }
            var S=TstDate()
        if(S)
        {
            date_fl.className='date_ok';
            document.getElementById("submit").disabled = false;
            document.getElementById("date_error").hidden = true;
        }
        else
        {
            date_fl.className='date_err';
            document.getElementById("submit").disabled = true;
            document.getElementById("date_error").hidden = false;           
        }
    }
    
    jQuery(function($){
        $("#birth_date").mask("99.99.9999");
    });
</script>
 
 
<script type="text/javascript">
    $(document).ready(function() {
        $('.btn_buy.popdef').click(function(event) {
            var datForm = $('#FormActionPayLC').serializeArray();
            console.log(datForm);
           $.ajax({
               url: '/money-transfer/payment.php',
               type: 'post',
               dataType: 'json',
               data: datForm,
               success: function(result) {
                 //$('#form_result').html(result);
                 console.log(result);
                 if(result.status == 'OK'){
                   // alert ('Перейти к оплате');
                    window.location.replace(result.url);
                    
                 }else if(result.status == 'error'){
                    //alert(result.message);
                    $("#error_p").html(result.message);
                    $("#win1").show();
                    $('.close').click(function(){
                        $("#win1").hide();
                    });
            
                 }
 
               }
           });
           return false;
        });
    });
</script>
 
 
<div class="error" style="display: none; margin: auto 0;width: 100px;height: 100px;background: grey;">
    <div class="error2"></div>
    <button id="button">Ок</button>
</div>
 
 
 
<div class="dm-overlay" id="win1">
    <div class="dm-table">
        <div class="dm-cell">
            <div class="dm-modal">
                <a href="#close" class="close" style="text-decoration:none !important;"></a>
                <strong id="h1_error" style="text-align: center; font-size: 20px">Ошибка</strong><br>
                <!--<div class="pl-left">
                </div>-->
                <span id="error_p" style="font-size: 14px;">Ошибка пополнения</span>
            </div>
        </div>
    </div>
</div>
 
<!--<p><a href="#win1" class="btn">Открыть окно 1</a></p>-->
 
 
 
<div class="content-form">
        <div class="fields">
            <form id="FormActionPayLC" name="form" method="POST" target="" action="/money-transfer/payment.php">
                <h1>Данные получателя:</h1>
                <div class="field">
                    <label class="field-title">Фамилия получателя</label>
                    <div class="form-input"><input type="text" name="last_name_recipient" maxlength="50" value="" class="input-field"></div>
                </div>
                <div class="field">
                    <label class="field-title">Имя получателя</label>
                    <div class="form-input"><input type="text" name="name_recipient" maxlength="50" value="" class="input-field"></div>
                </div>
                <div class="field">
                    <label class="field-title">Отчество получателя</label>
                    <div class="form-input"><input type="text" name="middle_name_recipient" maxlength="50" value="" class="input-field"></div>
                </div>
                <div class="field">
                    <label class="field-title">Дата рождения (день, месяц, год)</label>
                    <div class="form-input"><input type="text" name="birth_date" id="birth_date" maxlength="50" value="" class="input-field" onkeyup="ValidateDate(this)" onchange="ValidateDate(this)" value="" size="40"></div>
                </div>
                <p id="date_error" hidden="hidden" style="color: red;">Введите правильную дату</p>
                <br>
                <h2>Данные плательщика:</h2>
                <div class="field">
                    <label class="field-title">Ваша фамилия</label>
                    <div class="form-input"><input type="text" name="name" maxlength="50" value="" class="input-field"></div>
                </div>
                <div class="field">
                    <label class="field-title">Ваше имя</label>
                    <div class="form-input"><input type="text" name="last_name" maxlength="50" value="" class="input-field"></div>
                </div>
                <div class="field">
                    <label class="field-title">Ваше отчество</label>
                    <div class="form-input"><input type="text" name="middle_name" maxlength="50" value="" class="input-field"></div>
                </div>
                <br>
                <h2>Данные платежа:</h2>
                <div class="field">
                    <label class="field-title">Сумма платежа:</label>
                     </br><input id="x" type="number" name="amount" value="0">
                    <br><br> <label class="field-title">Сумма к зачислению:</label>
                          </br><input id="y" type="text" value=""  >
                         <script type="text/javascript">
                            x.addEventListener('input', function () {
                                y.value = (this.value * .98);
                            });
                        </script>
 
                    <!--<div class="form-input"><input type="text" name="amount" maxlength="50" value="" class="input-field"></div>-->
 
                    </br><small style="font-size: 10px;">Сервисный сбор – 2%</small>
                </div>
 
                <div id="message_error"></div>
                <div class="field field-button">
                    <button type="submit" name="submit" id="submit" class="btn_buy popdef" disabled="disabled">Перейти к оплате</button>
                </div>
            </form>
 
            <?/*<iframe class="iframe" src="https://money.yandex.ru/fastpay/form/724f71f496b144049f367946355e5476" width="500" height="417" style="border: 1px solid #e8e8e8;"></iframe>*/?>
        </div>
    </div>
 
<script type="text/javascript">
$(document).ready(function(){
  // ---- Календарь -----
  $('#birth_date').datepicker();
  // ---- Календарь -----
});
</script>
 
<? echo $arAgency["~PROPERTY_FSIN_REQ_VALUE"]["TEXT"];?>
 
 
 
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php"); ?>

@j2FunOnly · 18.10.2017, 15:10

Эм... ну не надо же копипастить с интернетов всякое... плюс у вас есть jQuery

PHP/HTML
1
2
3
4
5
6
7
<script type="text/javascript">
  var $y = $('input#y');
  $('input#x').bind('input', function () {
    var wTax = (this.value * 0.98).toFixed(2);
    $y.val(wTax);
  });
</script>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47

	Изменение input в зависимости от значения другого input-а 11.10.2017, 09:21. Показов 18680. Ответов 19 Метки нет (Все метки) Добрый день. Нужна помощь,я javascript почти не знаю, а есть задача: в форме input пользователь вводит сумму, и в другом поле сразу рассчитывается эта сумма минус 2% от нее. Может кто помочь? Я форумы облазил, нашел только как просто рассчитывать 2% от введенной суммы, но она тоже коряво работает 0

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	11.10.2017, 12:33 [ТС]
	Спасибо! А как сделать, чтобы без кнопки рассчитывало, сразу в другой инпут? Как то с использованием onekeydown? Добавлено через 2 часа 24 минуты Никто не знает как сделать?( 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	11.10.2017, 14:59
	Поле ввода с атрибутом `disabled` не является корректным и не обрабатывается формой при отправке. Как вариант поставить атрибут `readonly`, либо дублировать полем с типом `hidden` и таким же именем. ИМХО не стоит полагаться на эти данные, а рассчитывать их на сервере. 0

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	17.10.2017, 12:13 [ТС]
	Код в IE 11 не работает, есть какие нибудь аналоги? или мб как нибудь можно по другому сделать? 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	18.10.2017, 13:16
	Так а что не работает-то? Мой пример прекрасно себя чувствует в IE 11. А этот кусок гокода нигде работать не будет. 0

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	18.10.2017, 13:18 [ТС]
	Всмысле, так это ж Ваш код? 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	18.10.2017, 13:27
	Это только кусок от моего примера и сам по себе он работать не будет. Весь пример работает в IE 11. Это раньше были ограничения на событие input - первое что подсказал мой знакомый телепат, но увы его способности на этом заканчиваются. Поэтому дайте минимально полную +воспроизводимую+ проблему (разметка, js, стили, библиотеки подключаемые, ошибки в консоли - вот это вот всё) отображающий вашу проблему или ссылку на jsfiddle.net с кодом который не работает только в IE. Тогда и посмотрим что там может не работать. 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	18.10.2017, 13:43
	В консоли что-то есть? 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	18.10.2017, 13:48
	Тут заработает https://jsfiddle.net/eftutnu0/ Вы открываете файл с жесткого диска - IE будет блокировать выполнение JS (по умолчанию) - видели такое у себя в браузере? 1

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	18.10.2017, 13:57
	Вот видите какие нюансы бывают, вплоть до того как вы файлы открываете А просите попытаться решить проблемы приведя только кусочек кода (и то по-требованию). 0