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

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

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

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

@LFC · 11.10.2017, 09:51

HTML5

<!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

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

<!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

<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

<!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

<?
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

<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>

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

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

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	11.10.2017, 14:35 [ТС]	5
	Сообщение от j2FunOnly Где вы такие задания получаете? На работе) Добавлено через 1 час 42 минуты А input с атрибутом disabled не может обрабатываться в другом файле? У меня просто в обработчике реквестится $sum = intval($_REQUEST['имя инпута']); , а с disabled не работает 1

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

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

@j2FunOnly the hardway first 2461 / 1836 / 906 Регистрация: 05.06.2015 Сообщений: 3,603
	17.10.2017, 12:57	8
	Сообщение от endangered28 Код в IE 11 не работает Какой код? 0

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

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

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

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

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	18.10.2017, 13:44 [ТС]	15
	Сообщение от j2FunOnly В консоли что-то есть? нет, смотрел уже, пусто 0

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

@endangered28 2 / 2 / 4 Регистрация: 11.10.2017 Сообщений: 47
	18.10.2017, 13:52 [ТС]	17
	Сообщение от j2FunOnly Вы открываете файл с жесткого диска - IE будет блокировать выполнение JS (по умолчанию) Так в чем дело было, я видимо автоматом закрывал эти оповещения. Странно, что другие js скрипты работают, но это уже не суть. Спасибо,что разрешили проблему!) 0

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