表单提交未显示 JavaScript 输出
Form submit not showing JavaScript output
试图拥有它,以便当用户点击提交时,它将显示他们输入的信息并计算出在javascript中完成的数量/成本。但是,单击提交按钮时不显示任何内容。对不起,我的英语不好,如果不清楚。如果您需要澄清任何内容,请告诉我。下面是相关代码:.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;
}
任何帮助将不胜感激。对不起,如果我的代码不是那么好,我一周前才开始学习。谢谢!
有一些事情需要更新。
.HTML
您上次输入的结构不正确。
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone
相反,请尝试:
<label><input type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)" />Truncated Cone</label>
JavaScript
像document.landscape.inputcontrol[x].checked
和(Text1).value
之类的东西不是访问 DOM 元素的有效方法。 相反,请尝试document.getElementById()
或document.getElementsByName()
例如,更改
for(x=0;x<document.landscape.inputcontrol.length;x++)
{
if(document.landscape.inputcontrol[x].checked)
{
radio_value=document.lanscape.inputcontrol[x].value;
}
}
对此:(注意括号位置和缩进以提高可读性)
checkboxes = document.getElementsByName('inputcontrol');
for(x=0;x<checkboxes.length;x++) {
if(checkboxes[x].checked) {
radio_value=checkboxes[x].value;
}
}
最后,如果您的validateForm()
函数将返回 true,那么您的表单将发布到 index.html
并且页面将加载丢失buttonandchecks()
中发生的任何内容。 相反,您可能需要让该方法返回 false,或删除表单标记。
对于这些更改的一些示例,您可以看到它在此 JS Fiddle: https://jsfiddle.net/igor_9000/qfz6dr25/2/
希望对您有所帮助!
- 以字符串形式输出Javascript中的日期
- 使用PHP输出JavaScript时会出现神秘的换行符
- 如何从PHP文件输出javascript文件,该文件可以从脚本包含标记中引用
- XSLT:在元素标记中输出Javascript
- 如何在gump工作流中同时在独立文件和依赖文件中输出javascript
- 当从代码后台输出Javascript时,如何处理换行符
- 以XSL输出Javascript文档.write
- PHP 文件输出 javascript 代码本身而不是运行
- 为什么我得到未定义的输出Javascript
- ASP.Net 4.0 中,IE 11 中未输出 JavaScript
- Maven GWT - 仅输出 Javascript 文件
- 在不同的变量上输出 JavaScript 函数
- 如何在 html 中输出 javascript 变量的值
- 如何输出JavaScript对象中的元素
- 显示三个文本框之和的输出-Javascript
- jQuery函数中正确输出JavaScript变量
- 构建,修改,输出Javascript数组
- 使用Haxe输出JavaScript
- Javascript和HTML,不输出Javascript函数
- Php _gettext输出javascript代码