需要帮助从表单输入分配变量答案

【问题标题】：Need help assigning variable from form input需要帮助从表单输入分配变量
【发布时间】：2015-10-16 22:33:00
【问题描述】：

我正在尝试从文本表单中获取输入（特别是数字/浮点数），并将其分配给我可以用来进行计算的变量。单击计算按钮时应将其分配给变量。

我正在使用 getElementById()，它为我返回 undefined。

之前的研究指出，我需要将我的脚本标签放在我的输入标签下方。

所以我将脚本从 head 标记移到了 body 标记，但我仍然遇到问题（仍然返回未定义）。

<form name = "myform">
Item Price <input type = "text" name = "tPrice">
<br><br>

<input type = "button" value = "Calculate" onClick = "calculate()"/>

<input type = "submit" value = "Submit"/>
<input type = "reset" value = "Clear"/>


</form>

<script>

var totalPrice = parseFloat(document.getElementById("tPrice").value);

//var totalPrice = document.getElementById("iPrice");

//var price = document.getElementById("price").value;
//document.getElementById("price").value = totalPrice;
//var shipMeth = document.getElementById("ship").checked;



function calculate()
{

//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}


</script>

【问题讨论】：

标签： javascript html

【解决方案1】：

输入需要一个 ID 属性，您可能希望将获取和解析值移动到计算函数中。

Item Price <input type = "text" id = "tPrice">

和

function calculate()
{

var totalPrice = parseFloat(document.getElementById("tPrice").value);
//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}

问题是当输入没有值时，值的获取在页面加载时运行。如果您仅在单击按钮后获取值，则请确保在尝试获取输入之前已设置了值。

【讨论】：

这个。此外，在这样做之后，您将不再需要将您的script 放在最后（尽管我相信这些天仍然被认为是最佳实践）。
非常感谢！这两个建议都是正确的。

【解决方案2】：

您需要设置input id="tPrice" 而不是name 属性。希望有帮助:)

【讨论】：

感谢您的快速响应！这绝对有帮助，但是现在我得到了 NaN 的返回值。任何想法为什么会发生这种情况？
这与您的计算有关，请尝试打印输入的原始值以检查其是否正常工作。

【解决方案3】：

改变

Item Price <input type = "text" name = "tPrice">

到

Item Price <input type = "text" id = "tPrice">

【讨论】：

保留name="tPrice" 并添加id="tPrice" 可能是个好主意，因为name 在提交表单时在服务器端使用。
感谢您的快速响应！我没有得到 NaN 而不是 undefined，有什么想法为什么会发生这种情况？

【解决方案4】：

我会将 getElementById 调用移动到计算方法中，因为如果它是一个文本输入，您应该仅在用户用一个值填充它之后使用它的值进行计算。是的，将 id 添加到输入而不是 name 属性。如果你想在页面加载时立即保存输入的值，那么你应该等待 DOM 准备好：

    $(document).ready(function() { /* code here */ });

并且要小心，因为如果值为空，则 parseFloat 将产生 NaN。

【讨论】：

谢谢，这是解决这个问题的关键部分。

【解决方案5】：

将var 放入函数中，如下所示：

function calculate()
{
var totalPrice = parseFloat(document.getElementById("tPrice").value);
//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}

然后像这样将id="tPrice" 添加到输入中：

<input type = "text" name = "tPrice" id="tPrice">

看看小提琴：http://jsfiddle.net/vantbrhb/8/

【讨论】：