Embedding a JavaScript variable into a form input field

Question

Embedding a JavaScript variable into a form input field

I am facing a challenge in passing a JavaScript variable through a hidden form to a PHP script. While I have no issue passing it to PHP, I am struggling to integrate the variable into the form.

function calculate() {    
            var radio1 = document.forms["calcForm"].v1;
            var radio2 = document.forms["calcForm"].v2;

            var getf1 = getSelectedRadio(radio1);
            var getf2 = getSelectedRadio(radio2);

            var f1 = radio1[getf1].value;
            var f2 = radio2[getf2].value;

            var resultat = document.getElementById("resultat");
            var total = (parseInt(f1) + parseInt(f2)).toFixed(0);
            resultat.value = total; //used to show value in another input-field
            }

document.contactForm.formTotal.value = total;

The issue arises with the last line as it does not accept `total`. The `calculate` function works flawlessly - as does everything else when I substitute `total` with a simpler variable like `var x= 10;`

I am looking for a solution to set `document.contactForm.formTotal.value` to the value of `total`. It seems that there might be difficulty retrieving some values from the function, but my knowledge of JavaScript is limited, hindering me from finding a resolution.

javascript forms parsing variables radio-button

Answer 1

Answer №1

The variable "Total" is specifically declared within the function scope, preventing its usage in assignments outside of this function.

One solution is to either relocate the assignment statement inside the function or modify the function to return the value instead.

Answer 2

The variable "Total" is specifically declared within the function scope, preventing its usage in assignments outside of this function.

One solution is to either relocate the assignment statement inside the function or modify the function to return the value instead.

Answer 3

Answer №2

It is important to note that the variable total is currently outside of the function's scope. One possible solution is to declare it within the function itself, although a more efficient approach would be for the function to return a value. Here's how it can be implemented:

function calculate() {    
        var radio1 = document.forms["calcForm"].v1;
        var radio2 = document.forms["calcForm"].v2;

        var getf1 = getSelectedRadio(radio1);
        var getf2 = getSelectedRadio(radio2);

        var f1 = radio1[getf1].value;
        var f2 = radio2[getf2].value;

        var resultat = document.getElementById("resultat");
        var total = (parseInt(f1) + parseInt(f2)).toFixed(0);
        return resultat.value; // This will display the value in another input field.
}

var total = calculate();

Answer 4

It is important to note that the variable total is currently outside of the function's scope. One possible solution is to declare it within the function itself, although a more efficient approach would be for the function to return a value. Here's how it can be implemented:

function calculate() {    
        var radio1 = document.forms["calcForm"].v1;
        var radio2 = document.forms["calcForm"].v2;

        var getf1 = getSelectedRadio(radio1);
        var getf2 = getSelectedRadio(radio2);

        var f1 = radio1[getf1].value;
        var f2 = radio2[getf2].value;

        var resultat = document.getElementById("resultat");
        var total = (parseInt(f1) + parseInt(f2)).toFixed(0);
        return resultat.value; // This will display the value in another input field.
}

var total = calculate();

Embedding a JavaScript variable into a form input field

Answer №1

Answer №2

Similar questions

Sort the array and organize it by frequency

Leaving Facebook with onbeforeunload functionality

Encountering issues with Office.context.document.getFileAsync function

Session data becomes null after navigation in multi-page apps using Meteor and Backbone

Disable menu bar | customize menu bar in electronJS

Using *ngFor index value results in an error message saying "The call stack size has reached its maximum limit."

Is there an easy method to verify if the local storage is devoid of any data?

Modifying `msg.sender` in Solidity and Ether.js

Tips for resolving the "unsafe-eval" issue in Vue3 on the client-side platform

Show where the image should be placed according to the coordinates of the mouse click

JSON data is returned as Object Object

Excessive ajax requests occurring when the options in the form are altered

Function for adding numbers in Javascript with currying

What might be causing my list item to execute functions that it shouldn't be?

Sending a property as a parameter to a different component through Vue's router-link

How can I make child events affect the state of the parent component in ReactJs?

Having trouble loading a static image using the [email protected] component via webpack

After deleting all the duplicates, the array is now empty

Handling multiple promises in AngularJS is a common challenge that developers face

Guide to implementing a real-time countdown timer for days, hours, minutes, and seconds leading up to a specific date and time with JavaScript