JavaScript发送值到后端(隐藏的html输入或所有方式)

Question

我有两个非常简单的表单，看起来像这样:

<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的总和，然后将总和存储到隐藏的"输入和";Inside "form ">

<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 = parseInt(x)+parseInt(y)
document.getElementById('sum').value = sum //store sum to hidden input
}
calculate()
});

</script>

如何发送隐藏值"输入值"到后台(Django)当有人提交表单a或粘贴URL?

如果可行的话，我更喜欢这样的东西:

if sum.value not empty:
form_b.submit()
form_b.prevent_page_refresh

我不知道这是否可能或者如何在js或ajax中实现这样的，如果不是，我对所有的想法都是开放的。

编辑:Ajax解决方案后的def函数计算(){…}，并删除了第二个表单:

$.ajax({
type:'POST',
url:'{% url "index"%}',
headers: {
'X-CSRFToken': '{{ csrf_token }}'
},
data:{
sum:sum,
},
success: function(){}});   

Answer 1

我不确定我完全明白你的意思，但我认为这是你在寻找什么?

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>

基本上，一个简单的形式，计算结果并发布它?不知道隐藏输入有什么用