CODEWITHSUNDEEP
javascripthtml
Big T
Big T

Reputation: 59

Form submit not showing JavaScript output

Trying to have it so that when the user hit's submit it will show their info inputted and calculated volume/cost that's done in javascript. However the submit button isn't showing anything when clicked. Sorry for my poor english and if it's not clear. Let me know if you need anything clarified. Here's the related code: HTML:

<form name="landscape" action="index.html" onsubmit="return validateForm()" method="post">
...
...

<h3>Type of Planter:</h3>
<input type="radio" name="inputcontrol" value="10" id="inputcontrol1" onchange="setvisible(this.value)">Square/Rectangular Cubes
<input type="radio" name="inputcontrol" value="12" id="inputcontrol2" onchange="setvisible(this.value)">Flat bottmed cylinders
<br>
<input type="radio" name="inputcontrol" value="15" id="inputcontrol3" onchange="setvisible(this.value)">1/2 Spherical
type="radio" name="inputcontrol" id="inputcontrol4" value="20"  onchange="setvisible(this.value)">Truncated Cone
<br>
<br>
Length:<p><input type="text" size="10" id="set1" style="visibility:hidden;" ></p>
Width:<p><input type="text" size="10" id="set2"style="visibility:hidden;"  ></p>
Height:<p><input type="text" size="10" id="set3"style="visibility:hidden;" ></p>
Radius:<p><input type="text" size="10" id="set4"style="visibility:hidden;" ></p>
Radius2:<p><input type="text" size="10" id="set5"style="visibility:hidden;" ></p>
<input type=submit value="Submit" onClick="buttonandchecks();">
</form>
<br>
<br>
<h2>Order Form: </h2><h2><span id="result"></span></h2>


</body>
</html>

JAVASCRIPT:

function buttonandchecks()
{

var x;
var radio_value; 
var planter="";
var infooutput="";
var total=parseFloat(0);
var volume=parseFloat(0);
var length = document.getElementById("set1").value;
var width = document.getElementById("set2").value; 
var height = document.getElementById("set3").value; 
var radius = document.getElementById("set4").value;
var radius2 = document.getElementById("set5").value; 
var inputcontrol1 = document.getElementById("inputcontrol1");
var inputcontrol2 = document.getElementById("inputcontrol2");
var inputcontrol3 = document.getElementById("inputcontrol3");
var inputcontrol4 = document.getElementById("inputcontrol4");

        for(x=0;x<document.landscape.inputcontrol.length;x++)
        {
        if(document.landscape.inputcontrol[x].checked)
            {
             radio_value=document.lanscape.inputcontrol[x].value;
            }
        }
        radio_value=parseFloat(radio_value);

    if(inputcontrol1.checked)
    {
        volume = length * width * height;
        planter = "Square/Rectangular Cubes";
    }
    if(inputcontrol2.checked)
    {
        volume = 3.14 * radius * radius * height;
        planter = "Flat bottomed cylinders";
    }
    if(inputcontrol3.checked)
    {
        volume = 1/2 * (4/3* 3.14 * radius * radius * radius);
        planter = "1/2 Spherical";
    }
    if(inputcontrol4.checked)
    {
        volume = 1/3*3.14*(radius*radius*radius*radius2*radius2*radius2)*height;
        planter = "Truncated cone";
    }
total=radio_value * volume;
infooutput=("Firstname: " + (Text1).value + " Lastname: " + (Lname).value + " \nAddress: " + (Add).value + " \nPostal Code: " + (StPrv).value + "\n\n Planter: " + planter + "\nLength: " + length + " Width: " + width + " Height: " + height + " radius: " + radius + " 2nd radius: " + radius2 + "\n Volume: " + volume + "\n Total: " + total);
document.getElementById("result").innerHTML=infooutput;
}

Any help would be greatly appreciated. Sorry if my code isn't that good, I just started learning a week ago. Thank you!

Upvotes: 1

Views: 636

Answers (1)

ak_
ak_

Reputation: 2815

Theres a few things that need updating.

HTML

Your last input is not structured correctly.

type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone

Instead, try:

<label><input type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)" />Truncated Cone</label>

JavaScript

Things like document.landscape.inputcontrol[x].checked and (Text1).value are not valid ways to access DOM elements. Instead, try document.getElementById() or document.getElementsByName()

For example, change

for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
    {
    radio_value=document.lanscape.inputcontrol[x].value;
    }
}

To this: (notice the bracket positions and indents for readability)

checkboxes = document.getElementsByName('inputcontrol');

for(x=0;x<checkboxes.length;x++) {
    if(checkboxes[x].checked) {
        radio_value=checkboxes[x].value;
    }
}

Finally, if your validateForm() function is going to return true, then your form will post to index.html and the page will load losing anything that happened in buttonandchecks(). Instead, you may need to have that method return false, or remove the form tag.

For some examples of those changes, you can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/qfz6dr25/2/

Hope that helps!

Upvotes: 2

Related Questions