Question

I am constructing a simple calculator using a form that requires selections from a drop down which when run inputs 3 different calculations into 3 different fields. Anyway — I have put some js in the code to prevent invalid selection combinations, using an alert to inform the user. What I would like to do is reset only the inputs (changing none of the drop downs when the user clicks “ok” on the alert box. I’m a newbie, tried several things and not come close. Any help?

<script type="text/javascript">
function clearInputs() {
    document.getElementById("RawCapacity").value = "";
    document.getElementById("RAIDCapacity").value = "";
    document.getElementById("WindowsCapacity").value = "";
    }

function RAIDcalc() {
    //Values put into the calculator
    var A = document.forms[0].DriveCapacity.value *1;
    var B = document.forms[0].NumberOfDisks.value *1;
    var C = document.forms[0].RAID.value *1;
    var D = document.forms[0].HotSpare.value *1;

    //Pre-math for the calculations 
    var E = C + D;
    var F = B - E;
    var G = A * 0.95;

    var H = document.getElementById("RAID").options[document.getElementById("RAID").selectedIndex].text

    //Validate form (to ensure selections are made), 
    //validate values (to prevent impossible combinations), 
    //and to calculate and write the responses
    if (A == "null") {
        alert("Please make a selection in the required fields.");
        clearInputs();
        }
    else if (B == "null") {
        alert("Please make a selection in the required fields.");
        clearInputs();
        }
    else if (C == "null") {
        alert("Please make a selection in the required fields.");
        clearInputs();
        }
    else if (H == "RAID 5" && B<=(D + (1 * 1))) {
        alert("This configuration has too many Hot Spares.");
        }
    else if (H == "RAID 6" && B<=(D + (2 * 1))) {
        alert("This configuration has too many Hot Spares.");

    else if (H == "RAID 6" && B<4) {
        alert("RAID 6 requires a minimum of FOUR disks.");
        }
    else {
        document.forms[0].RawCapacity.value = Math.round(((A * B) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";   
        document.forms[0].RAIDCapacity.value = Math.round(((F * A) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";  
        document.forms[0].WindowsCapacity.value = Math.round(((F * G) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";
        }
    //For testing
    //alert("A="+A+" B="+B+" C="+C+" D="+D+" E="+E+" F="+F+" G="+G);
    //var RAIDtext = document.getElementById("RAID");
    //var RAIDselindex = document.getElementById("RAID").selectedIndex;
    //alert (document.getElementById("RAID").options[document.getElementById("RAID").selectedIndex].text);
    //if (H == "RAID 6" && B<4) alert("H = RAID 6 & B<4!");

    }
</script>

Answer 1

Add a function to clear the input fields:

function clearInputs() {
    document.getElementById("RawCapacity").value = "";
    document.getElementById("RAIDCapacity").value = "";
    // The same for other fields
}

and call it along with each alert() call:

if (A == "null") {
    alert("Please make a selection in the required fields.");
    clearInputs();
}

(Note: the condition in the if should use the == operator, which is used for comparison. = is for assignments.)

By the way, your else block is missing the curly braces, it should say:

else {
    document.forms[0].RawCapacity.value = Math.round(((A * B) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";   
    document.forms[0].RAIDCapacity.value = Math.round(((F * A) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";  
    document.forms[0].WindowsCapacity.value = Math.round(((F * G) / 1000)*Math.pow(10,2))/Math.pow(10,2) + " TB";
}