Form submit not showing JavaScript output

Question

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!

Do you have any debug information? Like if you put an alert in your buttonandchecks() function does it fire? Have you tried the develop debugging tools (F12 in Chrome) to step through your function? I don't see anything glaringly wrong with a quick glance. — xCRKx TyPHooN
– xCRKx TyPHooN, Commented Mar 4, 2016 at 21:08
Use onsubmit event for form instead of onclick for button, if the function return false after validation, the form will not be submitted. — Yasser
– Yasser, Commented Mar 4, 2016 at 21:12
@xCRKxTyPHooN putting an alert in the JS it made it not show up/fire. I tried the developer tool in chrome but it said there was nothing wrong — Big T
– Big T, Commented Mar 4, 2016 at 21:25
Where are the values for your infooutput? For example, Text1 is not defined, and even if it were, (Text1).value is not valid. — ak_
– ak_, Commented Mar 4, 2016 at 21:25

ak_ · Accepted Answer · 2016-03-04 21:42:32Z

2

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!

answered Mar 4, 2016 at 21:42

ak_

2,8153 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Big T Over a year ago

Thank you for helping me understand. It works after changing it to what you changed. Thank you!

Collectives™ on Stack Overflow

Form submit not showing JavaScript output

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related