从表单元素外部的输入标签中读取

Posted 2023-02-24

【中文标题】从表单元素外部的输入标签中读取

【英文标题】：reading from input tag outside form element

【发布时间】：2011-08-26 09:27:53

【问题描述】：

我有一个带有输入字段的网页（用于选择日期的日历）。 问题是我需要从 2 个不同的表单元素中读取该输入字段，每个元素都有自己的操作和其他值。

|日历| [做这个] [做那个]

我不想复制两种形式的输入字段，因为它看起来很傻。 有什么建议吗？

编辑：这里有两种形式：

<form action="/adm/user/credit/update?sms=<?=$id?>&user=<?=$user?>" method="post">
    <input type="hidden" name="isPaid" value="1"/>
    <label for="datums">Datums: </label>
    <input type="text" id="datums" name="datums"/>
    <input type="submit" value="Paid" style="background-color:green; color:white"/>
</form>
<form action="/adm/user/credit/extend?sms=<?=$id?>&user=<?=$user?>" method="post">
    <input type="hidden" name="phone" value="<?=$phone?>">
    <select name="period">
        <option value="7">7</option>
        <option value="14">14</option>
        <option value="30">30</option>
    </select> days
    <input type="submit" value="Extend" style="background-color: blue; color: white">
</form>

【参考方案1】：

只需给它唯一的 ID 并像这样在任何你想要的地方使用 document.getElementById：

var myValue = document.getElementById("myInputID").value;

这样input 的位置无关紧要，它甚至可以在任何形式之外。

编辑： 要在提交时读取值，首先将onsubmit 部分添加到相关表单中：

<form action="....." onsubmit="ReadValue(this);">

现在在你的页面中有这个：

<script type="text/javascript">
function ReadValue(oForm) 
   var myValue = document.getElementById("myInputID").value;
   alert("value is: " + myValue);

</script>

这会将值显示为警报对话框。如果您想使用该值填充隐藏的表单字段，请使用这样的代码：

function ReadValue(oForm) 
   var myValue = document.getElementById("myInputID").value;
   oForm.elements["myHiddenFieldId"].value = myValue;

希望它足够清楚！ :)

【讨论】：

很遗憾我对javascript知之甚少，能否请您添加一个用法示例？如何在提交时读取该值？

所以我只是在两个表单中添加一个隐藏字段并将其值设置为外部输入字段的值？就像<input type="hidden" name="datums" value="0" /> 一样，提交时值会改变？

@jur 如果您想发送该外部输入的值，那么是的，这是正确的。您也可以在两种形式中给它相同的名称，它不会引起任何冲突。

干杯 @jur 很高兴我能提供帮助.. :)