JavaScript отправляет значение на бэкэнд (скрытый html-ввод или все средства)
У меня есть две очень простые формы, которые выглядят следующим образом:
<form name='a' id='a'> // form a
<input type="text" name="x" id="x"> //input 1
<input type="text" name="y" id="y"> //input 2
<button>submit</button>
</form>
когда форма a будет отправлена, строка запроса URL будет выглядеть как example.com/?x=1&y=2
<form name='b' id='b' method="POST"> //form b
<input type="hidden" name="sum" id="sum"> // hidden input sum
</form>
У меня есть код скрипта вычислений, который вычисляет сумму ввода 1 и ввода 2, затем сохраняет сумму в скрытый "input sum" внутри "формы b"
<script>
window.addEventListener("DOMContentLoaded", function(){
function calculate(){
// I want it also to work when someone paste the url example.com/?x=1&y=2
const urlParams = new URLSearchParams(window.location.search);
x = urlParams.get('x')
y = urlParams.get('y')
sum = x+y
document.getElementById('sum').value = sum //store sum to hidden input
}
});
calculate()
</script>
Как мне отправить значение скрытой "input sum" в бэкенд (Django), когда кто-то отправляет форму a или вставляет URL?
Также:
document.getElementById('b').submit(); // will refresh page indefinitely, tried ajax e.prevetdefault(), didn't work, open to all ideas.
Не уверен, что точно понял вашу мысль, но, думаю, это то, что вы ищете?
const form = document.getElementById('a');
const sumInput = document.getElementById('sum');
function calculate() {
const urlParams = new URLSearchParams(window.location.search);
x = urlParams.get('x');
y = urlParams.get('y');
const sum = parseInt(x) + parseInt(y);
sumInput.value = sum;
fetch('http://localhost:8000', {
method: 'POST',
body: JSON.stringify({
value: sum
})
});
}
window.addEventListener("DOMContentLoaded", () => {
calculate()
});
<form name="a" id="a" onsubmit="calculate">
<input type="text" name="x" id="x">
<input type="text" name="y" id="y">
<button>submit</button>
<input type="hidden" name="sum" id="sum">
</form>
По сути, простая форма, которая вычисляет результат и публикует его? Не совсем понимаю, зачем нужен скрытый ввод.