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>

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

Вернуться на верх