Javascript-форум - Проверка внесенной суммы на доступность к покупке

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Проверка внесенной суммы на доступность к покупке (https://javascript.ru/forum/dom-window/83437-proverka-vnesennojj-summy-na-dostupnost-k-pokupke.html)

BorisJe, т.е. сумма меняется не только кнопками, но и руками тоже?

Цитата:

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

Если Изменения делаю с кнопки то ноль на массу

Ну тут все просто! :dance:

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style type='text/css'>
</style>
<script>
$(_ => {
	const o = $('.total')
	o.on('input', e => {
		alert('Changed!');
	})
	$('button').on('click', e => {
		o.val(+o.val() + 10)
		o.trigger('input')
	})
})
</script>
</head>
<body>
<button>+10</button> 
<label>
	Сумма
	<input name="total" type="text" class="total" />
</label>
</body>
</html>

Цитата:

Сообщение от ksa (Сообщение 542228)

BorisJe, т.е. сумма меняется не только кнопками, но и руками тоже?

Ну тут все просто! :dance:

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style type='text/css'>
</style>
<script>
$(_ => {
	const o = $('.total')
	o.on('input', e => {
		alert('Changed!');
	})
	$('button').on('click', e => {
		o.val(+o.val() + 10)
		o.trigger('input')
	})
})
</script>
</head>
<body>
<button>+10</button> 
<label>
	Сумма
	<input name="total" type="text" class="total" />
</label>
</body>
</html>

Не, сумма только с кнопки, руками нельзя вносить. У нас же кофейный автомат.

Цитата:

Сообщение от BorisJe (Сообщение 542231)

Не, сумма только с кнопки, руками нельзя вносить. У нас же кофейный автомат.

Да вот только сумму которая пришла туда, ну жмакнули Мы на 5 ровно 3 раза, там 15 в тотал.
дальше у нас есть хтмл

Код:

@foreach (var item in Model)



                    {



                        i++;



                        <tr>



                            <input type="hidden" name="id" value=@item.Id />



                            <td><input asp-for="@item.Name" value="@item.Id" name="Product" type="radio"></td>



                            <br />



                          <td>@item.Name</td>



                         <td>@item.Price</td>



                            <td style="width: 10%">



                                <button name="clickonbutton" type="submit" value="@item.Name"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id })" style="width: 128px; height: 96px;vertical-align: bottom"></button>



                            </td>



                            <td>@item.Description</td>



                             



                        </tr>



                    }

тут мы заполняем стоимость <td>@item.Price</td>
Мне хотелось чтобы при изменении Моего поля тотал проверились все элементы прайс и если тотал < прайс тогда оставить заблокированым. Ну или цветом для наглядности вывести или картинку изменить на "заблокировано не достаточно средств". Ну это уже другое.
Что сделал Я.

$(document).ready(function () {

        const res = document.querySelector('.result');

        const text = document.querySelector('#total');

        text.addEventListener('input', e => res.innerHTML = e.target.value);

    });

Но при изменинии с кнопки ничего не происходит, только если руками. Если начинать с начала, надо понять как делать определить изменение. Дальше найти прайса которые выше внесенной суммы, дальше уже заблокировать.

BorisJe, если сумма меняется только с кнопок - нет смысла проверять изменение суммы, т.к. ее руками никто не меняет.
Все твои проверки должны выполняться по нажатию кнопок.

Нажали кнопку - увеличь сумму, проверь доступность напитков.

Цитата:

Сообщение от ksa (Сообщение 542234)

Значит делаю так.
Изменяю сумму, читаю все цены, если ок то ставлю доступность если нет то блокирую?

Цитата:

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

Изменяю сумму, читаю все цены, если ок то ставлю доступность если нет то блокирую?

Если ты меня понял правильно и я тебя - то именно так. :yes:

Цитата:

Сообщение от ksa (Сообщение 542242)

Если ты меня понял правильно и я тебя - то именно так. :yes:

document.addEventListener('button', e => {
  console.log(`Форма: ${e.target.parentNode.name}, инпут: ${e.target.name}`)
})

Пододёт ли этот код для контроля нажатий кнопок?

Цитата:

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

Пододёт ли этот код для контроля нажатий кнопок?

Я не слышал про такое событие на кнопках - button.

$(document).ready(function () {
        $(_ => {
            const o = $('.total');
            o.on('input',e => {
                alert('changedTotal');
            });
            $('button').on('click',e => {
                o.val(+o.val() + 10);
                o.trigger('input');
            });
        });
    });

Работает 100% если нажимаю бутон, срабатывает. А как Мне теперь отследить что находиться в поле тотал?

BorisJe, пока я тебе делал пример на нативном JS, ты уже в жиКвери ускакал... :D
Ты уже определяйся на чем будешь работать дальше. ;)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	document.querySelectorAll('button').forEach(_ => {
		_.addEventListener('click', e => {
		alert(`Форма: ${e.target.parentNode.name}, инпут: ${e.target.name}`)
		})
	})
})
</script>
</head>
<body>
<form name='frm-1'>
	<button name='btn-1-1'>Item 1 1</button>
	<button name='btn-1-2'>Item 1 2</button>
</form>
<form name='frm-2'>
	<button name='btn-2-1'>Item 2 1</button>
	<button name='btn-2-2'>Item 2 2</button>
</form>
</body>
</html>