JavaScript send value to the backend (hidden html input or all means)

Question

I have two really simple form that looks like this:

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

when the form a is submitted, the URL query string will look like 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>

I have a computation script code that calculates the sum of input 1 and input 2 then stores the sum to hidden "input sum" inside "form 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 = parseInt(x)+parseInt(y)
             document.getElementById('sum').value = sum //store sum to hidden input
          }
      calculate()
    });
    
</script>

How do I send value of hidden "input sum" to the backend(Django) when someone submits form a or paste the URL?

I prefer something like this if such thing is viable:

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

I don't know if this is possible or how to implement such in js or ajax, if not I'm open to all ideas.

Edit: Ajax solution right after def function calculate(){...}, And removed the 2nd form:

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

You make a GET request to the backend when the first form is submitted, can you not do what you need to do in that request? Why do you need to do an additional POST? — Iain Shelvington
– Iain Shelvington, Commented Oct 17, 2021 at 11:57
@IainShelvington I could not use GET, In practice, the value of query parameter("sum") exceeds chrome character limits, over 2500 characters, even if chrome url bar does not have a length limit, It doesn't look pretty to have such long url. — Hello World
– Hello World, Commented Oct 17, 2021 at 12:09
@IainShelvington, I'm open to just one form or even no form, If it sends the computed "sum" to the backend — Hello World
– Hello World, Commented Oct 17, 2021 at 12:15
Why go round and round in circles? You first make a request to the backend to get the page while specifying x and y as query parameters, why not just calculate the "sum" in the backend itself at that time? — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Oct 17, 2021 at 12:27
@AbdulAzizBarkat, I could not afford to calculate such thing in the backend, The length of "sum" well exceeds 2500 characters, I would like the users to share such cost, Not the server. — Hello World
– Hello World, Commented Oct 17, 2021 at 12:35

O. Aroesti · Accepted Answer · 2021-10-17 12:49:18Z

2

Not sure I'm getting your point exactly, but I think this is what you're looking for?

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>

Basically, a simple form that calculates the result and posts it? Not sure what's use for the hidden input, then.

answered Oct 17, 2021 at 12:49

O. Aroesti

1,10512 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hello World Over a year ago

Eventually I used ajax, Ajax right after def function calculate solves it, I also removed the 2nd form, But fetch also works, Thank You!

Collectives™ on Stack Overflow

JavaScript send value to the backend (hidden html input or all means)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related