在表单输入中使用变量定义默认值

Question

我有一个叫做totaldue的变量，我希望当提交表单时将其作为默认值。代码如下：

input type="number" name="sum-due" readonly="readonly" value=totaldue

但是这并没有在表单中显示totaldue的内容。

是否有可能做到这一点，如果可以的话，正确的语法是什么？

谢谢 - 玛丽

- Marie Carroll Rigby

---

这是一个 JavaScript 变量还是服务器语言变量？ - Brandon Joyce

Answer 1

你无法通过HTML将变量赋值给文本框。相反，直接放置该值。

input type="number" name="sum-due" readonly="readonly" value="5"

这只能通过使用 javascript 或 jQuery 实现。

例如：

  <input id="my-input" type="number" name="sum-due" readonly="readonly" />

JS：

var totaldue = 5;
document.getElementById('my-input').value = totaldue;

更新：

根据您的评论，

<script>
    var totaldue = 10;
    document.getElementById('paythis').value = totaldue;
</script>

<form id="pay1" action="hotguidebelize-com.cgi-data.com/webform/5627816.cgi"; method="post">
    <label>Total amount due:</label>
    <input id="paythis" type="number" name="sum-due" readonly="readonly" />
    <input type="submit" value="Proceed To Payment" />
</form>

正如我之前所说，你无法通过HTML将变量分配给文本框。以下是错误：

(1) 在你的JavaScript中没有分配变量totaldue。

var totaldue = 5;

(2) 尝试使用 <label> 标签。 更多信息来自 MDN。

(3) 您正在使用 document.getElementById，它引用了 id 选择器。但是您在 input 标签中没有指定 id。更多信息来自 MDN

<input id="paythis" type="number" name="sum-due" readonly="readonly" />

这是我为您创建的一个简单的JSFiddle。

如果您有疑问，请随时提出，我会在有时间的时候回复您，或者您可以得到其他人的帮助。

- Praveen

---

作为一个完全的新手，我感到很迷茫。所以我现在有了以下代码：<script> document.getElementById('paythis').value = totaldue; </script> <form id="pay1" action="https://hotguidebelize-com.cgi-data.com/webform/5627816.cgi" method="post"> 总金额： <input type="number" name="sum-due" readonly="readonly" value=paythis><input type="submit" value="前往付款" /> </form> 但它只显示单词“paythis”，而不是变量中的数字。我知道这可能是非常基础的东西，但我还是不明白！ - Marie Carroll Rigby

@MarieCarrollRigby 我更新了我的回答。花时间学习东西。 - Praveen

关于代码的脚本部分，有一个注释。您可以通过直接将返回值分配给字段来节省一行。例如：<script>document.getElementById('paythis').value = 10;</script> - JoBaxter

Answer 2

如果你想在HTML元素中设置默认值，有两个选项

选项1

input type="number" name="sum-due" readonly="readonly" value="your_literal_value"

选项2 - 使用JavaScript / jQuery（如果允许使用）

HTML

<input type="number" id="totalDueTextbox" name="sum-due" readonly="readonly" value="your_literal_value" />

JavaScript

$(document).ready(function() { 

 var totaldue = 200;
 $("#totalDueTextbox").val(totaldue);
}); 

- wizzardz