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

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

View

<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

        @foreach (var entity in Model.Coins)
        {
            <div class="btn">
                <button class="btn btn-info" value=@Convert.ToInt32(@entity.Cost) disabled=@entity.IsBlocked onclick="myFunction(@Convert.ToInt32(@entity.Cost))">@entity.Cost</button>
            </div>
        }
        <form asp-action="Purchase" asp-controller="User"
              method="post" enctype="multipart/form-data">
            <!--Products-->
            @await Html.PartialAsync("_Products", @Model.ProductViewModels)

            <input type="hidden" id="coin1" name="coin1"/>
            <input type="hidden" id="coin2" name="coin2"/>
            <input type="hidden" id="coin5" name="coin5"/>
            <input type="hidden" id="coin10" name="coin10"/>

            <label>
                Сумма
                <input name="total" type="text" class="total" />
            </label>
            <input class="button" type="submit" value="Оплатить" />
        </form>
        <div id="outputField"></div>
    </div>
</div>

partial View:

<div class="container">
    <div class="row">
        <h3>Продукты</h3>
        @if (Model.Any())
        {
            <div class="formR">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Выбранный</th>
                            <th>Наименование</th>
                            <th>Цена</th>
                            <th>Картинка</th>
                            <th>Описание</th>
                            <th>Наличие</th>
                        </tr>
                    </thead>
                    @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%">
                                @*//<input type="submit" class="imgb" src="~/images/@item.TitleImagePath" width="100" height="111" />*@
                                @*<p><input type="image" src="~/images/@item.TitleImagePath" alt="ОК"></p>*@
                                @*<img class="img-block" src="~/images/@item.TitleImagePath" width="100" height="111"/>*@
                                <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>
                    }
                </table>
            </div>
        }
    </div>
</div>

Можно ли как нибудь сделать так:
Вначале внесенная сумма 0
Все напитки заблокированы.
Пользователь жмет на кнопки на панели чтобы внести сумму, сумма складывается.
Пользователь внес 30, напитки все еще заблокированы.
Если пользователь добавляет 35 становятся доступны напитки по цене 35 и так далее.
Радио бутон нужен для передачи в контроллер, если отмечен передаем. Так и понимаем какой элемент был выбран

Да, так сделать можно. :yes:

Как Я уже перепробовал кучу всего, не могу и все. Не делается так как Я хочу. Или знаний не хватает просто или опыта. Не пойму:cray:

BorisJe, когда клацнули на кнопку - ты меняешь сумму.
После этого нужно "пройтись" по радиокнопкам и сделать активными те, что еще не активны и их цена меньше твоей суммы.

Скорее всего надо блокировать вообще все строчку ну или сумму подсвечивать красным и блокировать радио кнопку.
По клику на кнопку картинку идет переход на контроллер ну а там вся логика.

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

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

Кто меняет хтмл?
Его присылает контроллер?

У Меня платформа Asp Net core.
HTML никто не формирует он есть уже его нужно отредактировать :help: в зависимости от внесенных данных на форму пользователем. Данные в хмтл попадают из базы данных. Вся разметка написана.

Каждый напиток имеет свою стоимость.
Если внесенная сумма меньше стоимости напитка, пользователь не может выбирать этот напиток. Нужно держать его заблокированным :stop:.
Если внесенная сумма достаточна для оплаты, пользователь выбирает напиток кликая на картинку. :yes:

А дальше Я передаю действие контроллеру:thanks: . Ну и тут уже уменьшая количество напитков -1 , вношу изменения по монетам и выдаю сдачу :cray: .

Значит можно использовать тот алгоритм (на JS) что я описал выше...

Тогда верно будет так слушать изменения input

$('#total').on('input',function(e){
        alert('Changed!');
    });;

$(document).ready(function () {
        const res = document.querySelector('.result');
        const text = document.querySelector('#total');
        text.addEventListener('input', e => res.innerHTML = e.target.value);
    });

Если вношу изменения вручную все ок, Я могу слушать инпут и вижу изменения. Если Изменения делаю с кнопки то ноль на массу

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>

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

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

тут мы заполняем стоимость <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, если сумма меняется только с кнопок - нет смысла проверять изменение суммы, т.к. ее руками никто не меняет.
Все твои проверки должны выполняться по нажатию кнопок.

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

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

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

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

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

Я не слышал про такое событие на кнопках - 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>

Именно "следить" не нужно. :nono:
Просто прочитать это значение. Я, в том примере, сделал это так

const o = $('.total')
...
+o.val()

$(document).ready(function () {
        $(_ => {
            const o = $('.total');
            o.on('input', e => {
                var nameTotal = document.getElementsByName('total');
                alert('changedTotal');
                [B]alert(document.querySelector("input[name='total']").value);[/B]
            });
            $('button').on('click',e => {
            /*    o.val(+o.val() + 10);*/
                o.trigger('input');
            });
        });
    });

А что если вот так? По чуть чуть у нас получается вроде раскрутить эту на первый взгляд невыполнимую задачу

var nameTotal = document.getElementsByName('total');
                var nameTotalValue = document.querySelector("input[name='total']").value;
                alert('changedTotal');
                alert(nameTotalValue);

А вот так аллерт не работает, вообще никакой

Я плохо знаю что одну что вторую технологию, по этому что нашел в интеренете подделал немного. И кажись получается каша. Как в меме, собрал код со стака, гитхаба, ответы мэйл :lol:

const elementsPrice = document.querySelectorAll('price');
                for (var i = 0; i < elementsPrice.length; i++) {
                    alert('elementsPrice[i]');
                }

цикл не работает, может подсказать что не так?

<td id="price">@item.Price</td>

Так вовсе каша какая-то... :-E
Это тупиковое "направление". :nono:

Нативный JS сейчас довольно удобный и возможностей ему добавили. Т.ч. можно пользоваться только им.
Так и ресурсы меньше съешь. Они ведь у тебя ограничены наверное?

ИД на странице должен быть уникальным. :nono:

Это вообще селектор тега...
А тега price у тебя нет. :no:

BorisJe, ты методом тыка задачку свою не решишь. :no:
А вот наговнокодишь знатно! :D

Т.ч. начинай книжки по JS читать. Есть довольно хорошие серии книг:
- Для чайников
https://codernet.ru/books/js/javascr...v_kris_minnik/
- За 24 часа
https://www.litmir.me/bd/?b=276622&p=1

Там и страниц не так много (300-400)...

Так смотри, почти решена :lol:
Тут нужна помощь или совет.

$(document).ready(function () {
        $(_ => {
            const o = $('.total');
            o.on('input', e => {   
                const elementsPrice = document.querySelector('#price');
                //alert('changedTotal');
                //alert(nameTotalValue);
                var priceElem = document.querySelectorAll('#price');
                for (var i = 0; i < priceElem.length; i++) {
                    alert(priceElem[i].innerText);
                }
            });
            $('button').on('click',e => {
            /*    o.val(+o.val() + 10);*/
                o.trigger('input');
            });
        });
    });

в elementsPrice общая сумма, в цикле перебираю все элементы с id price. А это как раз наш клиент.
кажись раскрутили Мы это дело.
Как бы Мне теперь, заблокировать
<td><input asp-for="@item.Name" value="@item.Id" name="Product" type="radio" disabled="true"></td>
Надо Менять disabled true или false
и весь <tr> цветом покрасить каким нибудь

Пока ты роешь подземный ход на чердак... :D

:lol: :help:
https://jsfiddle.net/wodL97fk/1/
Вот пример.
Немного переделал, не то совсем?:-?

Такой вот тебе пример замастырил...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.off {
	color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	const s = 25
	document.querySelectorAll('table input').forEach(_ => {
		const r = _.parentNode.parentNode
		if (+_.value < s) {
			_.disabled = true
			if (!r.classList.contains('off')) r.classList.add('off')
		} else {
			_.disabled = false
			if (r.classList.contains('off')) r.classList.remove('off')
		}
	})
})
</script>
</head>
<body>
<table>
	<tr class='off'>
		<td><input value='10' name="Product" type="radio" disabled />10</td>
	</tr>
	<tr class='off'>
		<td><input value='20' name="Product" type="radio" disabled />20</td>
	</tr>
	<tr class='off'>
		<td><input value='30' name="Product" type="radio" disabled />30</td>
	</tr>
</body>
</html>

Я мельком глянул... :-?
Мне показалось слишком много лишнего кода. Х/з зачем он там...

Да это тестировал кое что не успел еще убрать

Спасибо за примеры. Очень помогли. Но только Я столкнуллся с другой проблемой.
https://jsfiddle.net/wodL97fk/1/
Если посмотришь пример, и поклацаешь по кнопкам, 1.2.5.10 то Я сначала получаю значение потом помещаю туда. А Можно это как нибудь сделать в другую сторону. Сначала помещаю, потом получаю.
А то Я внес но значение получаю старое

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Что это?

$(document).ready(function () {
       $(_ => {

Что это?

Ты не по тому пути идешь... :no:
Не нужно отслеживать изменение поля "сумма". Весь алгоритм должен строиться на клацанье по кнопкам.
Там ты и получишь "новую" сумму. Потом с ней и нужно анализировать радиокнопки...

Не совсем смог у себя это применить.

Я не могу сказать, делал по гайдикам