What is the process for declaring a variable and then using it within a concealed input field?

Question

What is the process for declaring a variable and then using it within a concealed input field?

I have a JavaScript code that performs mathematical calculations, and I need to extract the final result to include it in a form. My plan was to utilize an

<input type="hidden" name="new total">

field to store this result. I am looking to retrieve the information from the "New Total" field. You can view my JavaScript code in action here: http://jsfiddle.net/danielrbuchanan/yjrTZ/5/

var prices = [];

function remove(arr, itm){
    var indx = arr.indexOf(itm);
    if (indx !== -1){
        arr.splice(indx, 1);
    }
}

function calculateSelectedDues(checkbox, amount) {
    if (checkbox.checked === true) {
        prices.push(amount);
    } else {
        remove(prices, amount);
    }

    var total = 0;
    for (var i = 0, len = prices.length; i < len; i++)
        total += prices[i];

    var min = prices.slice().sort(function(a,b){return a-b})[0];
    if(typeof min === 'undefined') min = 0;

    var withDiscount = total - min;
    var discountAmount = withDiscount - total;

    //document.grad_enroll_form.total.value = total;
    document.querySelector("#value").innerHTML = "Total: $"+total+'<br>';
    document.querySelector("#value").innerHTML += "Discount: $"+discountAmount+'<br>';
    document.querySelector("#value").innerHTML += "New total: $"+withDiscount+'<br>';
}

Although it appears straightforward, I seem to be struggling to figure it out.

javascript forms

Answer 1

Answer №1

It seems like what you're looking to do is assign a variable to an input value, which can be done using the following code:

JavaScript:

document.getElementById("newTotal").value = updatedValue;

HTML:

<form>
    <input id='newTotal' type='hidden' name='NewTotal' value='' />
</form>

I hope this solution works for you.

Answer 2

It seems like what you're looking to do is assign a variable to an input value, which can be done using the following code:

JavaScript:

document.getElementById("newTotal").value = updatedValue;

HTML:

<form>
    <input id='newTotal' type='hidden' name='NewTotal' value='' />
</form>

I hope this solution works for you.

Answer 3

Answer №2

<input type="hidden" id="new_total_amount" name="new_total_amount">
<!-- ensure no spaces in name and id attributes -->

Insert the above code snippet at the conclusion of the calculateSectedDues function.

document.getElementById('new_total_amount').value = withDiscount;

Answer 4

<input type="hidden" id="new_total_amount" name="new_total_amount">
<!-- ensure no spaces in name and id attributes -->

Insert the above code snippet at the conclusion of the calculateSectedDues function.

document.getElementById('new_total_amount').value = withDiscount;

Answer 5

Answer №3

There are a couple of pathways you can take.

Option 1: Using jQuery

Add a visible div in any way that suits your needs. Attach onChange() events to your input fields to trigger the calculation.

<div id="finalValue"></div>

<script language="javascript">
$(function() {
    $("form input").change(function() {
        calculateSectedDues($("#checkboxid"), $("#amountid").val());
    });
});
</script>

In the calculateSectedDues() function, append this at the end:

$("#finalValue").html("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

Option 2: Without using jQuery

<div id="finalValue"></div>

<script language="javascript">
function bindEvent() {
    calculateSectedDues(document.getElementById("checkboxid"), document.getElementById("amountid").value);
}
window.onload = function()
{
    var elJ = document.getElementsByTagName("input");
    for (var i=0;i<elJ.length;i++) {
        elJ[i].addEventListener('change',bindEvent,false);
    }
}
</script>

In the calculateSectedDues() function, add this at the end:

document.getElementById("finalValue").InnerHtml("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

Is this the outcome you are aiming for?

Remember to also perform the calculation on the Server Side and not solely depend on JavaScript. Displaying the information beforehand is mainly for user notification, as hidden total fields could be exploited through front-end manipulation techniques.

Answer 6

There are a couple of pathways you can take.

Option 1: Using jQuery

Add a visible div in any way that suits your needs. Attach onChange() events to your input fields to trigger the calculation.

<div id="finalValue"></div>

<script language="javascript">
$(function() {
    $("form input").change(function() {
        calculateSectedDues($("#checkboxid"), $("#amountid").val());
    });
});
</script>

In the calculateSectedDues() function, append this at the end:

$("#finalValue").html("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

Option 2: Without using jQuery

<div id="finalValue"></div>

<script language="javascript">
function bindEvent() {
    calculateSectedDues(document.getElementById("checkboxid"), document.getElementById("amountid").value);
}
window.onload = function()
{
    var elJ = document.getElementsByTagName("input");
    for (var i=0;i<elJ.length;i++) {
        elJ[i].addEventListener('change',bindEvent,false);
    }
}
</script>

In the calculateSectedDues() function, add this at the end:

document.getElementById("finalValue").InnerHtml("Total: $" + total + "<br />Discount: " + discountAmount + "<br />New Total: " + withDiscount + "<br />");

Is this the outcome you are aiming for?

Remember to also perform the calculation on the Server Side and not solely depend on JavaScript. Displaying the information beforehand is mainly for user notification, as hidden total fields could be exploited through front-end manipulation techniques.

What is the process for declaring a variable and then using it within a concealed input field?

Answer №1

Answer №2

Answer №3

Similar questions

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

Retrieve progress with easing using jQuery's animate() function

Steps to automatically populate the dropdown upon page load

Tracking progress within an HTML table

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

A reliable approach for dynamically altering SVG graphics

Saving form blueprints and operations in a Data Repository

How can NodeJS functions leverage parameters such as req, res, and result?

Launching apps from the background using React Native deep linking

tips for correctly importing source files into jasmine-node testing framework

Validation is a must in Angular 2

Navigating and extracting nested JSON properties using JavaScript (React)

Ways to halt the setInterval function after executing a specific function within it

What is the most effective way to reduce the length of user input in a textarea and set limits on both the maximum

Automatic line breaks within a JavaScript code can be achieved by using

Sending data from the View to the Controller in a Razor MVC3 application involves passing a model along with

Creating a 3D visualization with three.js

Is the size of the node_modules directory a factor in the cold start performance of cloud functions?

Solving the Cross-Origin Resource Sharing problem in AngularJS

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript