CODEWITHSUNDEEP
javascriptphpjqueryforms
acr
acr

Reputation: 1746

keeping a innerhtml value from a javascript after a html form submit

I am using below javascript to collect values from some textboxes,do some calculations and display the result as a innerhtml content

window.onload = function () {
    var left = document.getElementById('mem_count');
    var right = document.getElementById('siz_single');
    var result = document.getElementById("disp_siz");
    function check(a, b, elem) {

        var txt = '';
        if (a === 0 && b === 0) {

        } 
        else if (a !== 0 && b === 0) {
         txt = "Enter size of single device in above column"

        }
        else if(a == 0 && b !== 0){

        txt = "Enter Meta member count in above column "
        }

        else  {
            var c = 1 +a        
            txt = "Your meta device size is " + (c*b) +" MB" + " = " + (c*b/1024) +" GB ";
        }
disp_siz.innerHTML = txt;

    }

    mem_count.onkeyup = calc;
    siz_single.onkeyup = calc;

    function calc() {
        var a = parseFloat(mem_count.value) || 0;

        var b = parseFloat(siz_single.value) || 0;
        check(a,b, this);
    }
}

and the output will be display in between the div

<div id="disp_siz"><-----above output will come here----></div>

This div is part of a html form. I am able to keep all my other form values in same field after form submission. But not able to display above output. It just clearing my values. Is there anyway I can echo this javascript variable value to the same field after form submision ?

Upvotes: 1

Views: 1152

Answers (2)

epascarello
epascarello

Reputation: 207511

First Option:

Set it on the serverside.

Second Option:

If the page refreshes, it is like cleaning a whiteboard, you got to start over. If the fields are there, trigger the function to run.

Add calc(); to the end of the onload function. 

    ...
    ...

    function calc() {
        var a = parseFloat(mem_count.value) || 0;

        var b = parseFloat(siz_single.value) || 0;
        check(a,b, this);
    }
    calc();  //<-- added this to trigger the calculation
}

Another problem:

And you should not reference an element by their id directly. You should use 

document.getElementById("disp_siz").innerHTML = txt;

Upvotes: 1

Bucket
Bucket

Reputation: 7521

You're referencing a variable (disp-siz) that doesn't exist. Use the variable you created earlier, result.

result.innerHTML = txt;

Upvotes: 0

Related Questions