Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2019, 14:21
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Помогите допилить скрипт
Помогите пожалуйста допилить скрипт
На выходе хочу получить следующее:
1. Есть чекбокс, ставишь галочку -> открывается поле (работает)
2. Заполняешь значение цифрой -> идет подсчет (Работает) (при условии если в других стоит значение 0 ( если нет то NaN - не могу понять как обойти ))
3. при снятии галочки сброс input значения на 0 (работает)
4. Функция change() все равно оставляет значение поля которое было перед этим и соответственно кнопка "Выбрать" остается активной
<input id="checki1" type="checkbox" name="out[]" value="67" onchange="document.getElementById('submit1').disabled = !this.checked;inputchange();">
<input id="submit1" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />

<input id="checki2" type="checkbox" name="out[]" value="69" onchange="document.getElementById('submit2').disabled = !this.checked;inputchange();">
<input id="submit2" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />

<input id="checki3" type="checkbox" name="out[]" value="66" onchange="document.getElementById('submit3').disabled = !this.checked;inputchange();">
<input id="submit3" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />

<button id="submit" type="submit" class="btn btn-primary btn-lg btn-block" disabled>Выбрать</button>
// Функция которая удаляет значение переводя на 0
function inputchange()
{
	var chkd1 = document.getElementById('checki1').checked;
	if(chkd1 === false)
	{
	document.getElementById('submit1').value = 0;
	}
	var chkd2 = document.getElementById('checki2').checked;
	if(chkd2 === false)
	{
	document.getElementById('submit2').value = 0;
	}
	var chkd3 = document.getElementById('checki3').checked;
	if(chkd3 === false)
	{
	document.getElementById('submit3').value = 0;
	}
}
// Функция которая считает общее значение введенных в поле цифр (блокируя кнопку отправить)
function change()
{
	var inp1 = document.getElementById('submit1').value;
	var inp2 = document.getElementById('submit2').value;
	var inp3 = document.getElementById('submit3').value;
	var inptotal = parseInt(inp1) + parseInt(inp2) + parseInt(inp3);
	document.getElementById('wtotal').innerHTML = inptotal ;
	if (inptotal <= 100 )
	{
		document.getElementById('submit').disabled = false;
	}
	else
	{
		document.getElementById('submit').disabled = true;
	}
}
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2019, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,071

eLDeR,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<p id="wtotal">0</p>
<form action="https://">
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<button type="submit" class="btn btn-primary btn-lg btn-block"  disabled>Выбрать</button>
</form>
<script>
var form = document.querySelector("form"),
    check = form.querySelectorAll(".out"),
    num = form.querySelectorAll(".form-control"),
    btn = form.querySelector(".btn"),
    p = document.querySelector("#wtotal"),
    dis = function(elem, removeDisabled) {
        removeDisabled ? elem.removeAttribute("disabled") : elem.setAttribute("disabled", "disabled")
    },
    total = function(event) {
        var sum = 0;
        check.forEach(function(inp, i) {
            var elem = num[i], checked = inp.checked;
            elem.value = checked ? +elem.value || 0 : 0;
            dis(elem, checked);
            sum += +elem.value
        });
        dis(btn, sum > 100);
        p.innerHTML = sum;
        return sum > 100
    };
form.addEventListener("change", total);
form.addEventListener("input", total);
form.addEventListener("submit", total);
</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2019, 03:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А почему не свойство изменять?

dis = function(elem, removeDisabled) {
        elem.disabled = !removeDisabled
    }
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2019, 07:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,071

laimas,
можно и свойство.
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2019, 09:59
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Спасибо, на хроме работает, но в IE11 он не работает.
Мой опубликованный - работает, но не полностью.
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2019, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,071

Сообщение от eLDeR
но в IE11 он не работает.
добавить в начало скрипта
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
};
Ответить с цитированием
  #7 (permalink)  
Старый 03.09.2019, 10:55
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

подскажите, как сделать так если стоит 0 в значении то кнопка тоже не активна при условии
dis(btn, sum <= 100);
Ответить с цитированием
  #8 (permalink)  
Старый 03.09.2019, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,071

Сообщение от eLDeR
подскажите
не понимаю.
Ответить с цитированием
  #9 (permalink)  
Старый 03.09.2019, 15:56
Интересующийся
Отправить личное сообщение для eLDeR Посмотреть профиль Найти все сообщения от eLDeR
 
Регистрация: 28.05.2019
Сообщений: 23

Если галочку снимаю, то идет сброс на ноль.
Кнопка при условии
dis(btn, sum <= 100);
Активна

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<p id="wtotal">0</p>
<form action="https://">
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<button type="submit" class="btn btn-primary btn-lg btn-block"  disabled>Выбрать</button>
</form>
<script>
var form = document.querySelector("form"),
    check = form.querySelectorAll(".out"),
    num = form.querySelectorAll(".form-control"),
    btn = form.querySelector(".btn"),
    p = document.querySelector("#wtotal"),
    dis = function(elem, removeDisabled) {
        removeDisabled ? elem.removeAttribute("disabled") : elem.setAttribute("disabled", "disabled")
    },
    total = function(event) {
        var sum = 0;
        check.forEach(function(inp, i) {
            var elem = num[i], checked = inp.checked;
            elem.value = checked ? +elem.value || 0 : 0;
            dis(elem, checked);
            sum += +elem.value
        });
        dis(btn, sum <= 100);
        p.innerHTML = sum;
        return sum <= 100
    };
form.addEventListener("change", total);
form.addEventListener("input", total);
form.addEventListener("submit", total);
</script>

</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 03.09.2019, 16:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,071

eLDeR,
так зачем вы меняли строки 39 и 41?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите допилить скрипт свертывания и развертывания razorg1991 Ваши сайты и скрипты 7 06.09.2013 20:54
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 17:19
Допилить скрипт прокрутки страницы leny Javascript под браузер 4 20.04.2013 14:56
Скрипт if помогите пЕньку NeverLux Общие вопросы Javascript 1 06.01.2011 13:33
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 00:05