Question

我有一个带有两个选项的表单--10和其他 - 然后是其他旁边的文本字段，这样您就可以输入所需的金额。以下是我现在设置的方式：

<input class="mainForm" id="Amount" name="Amount" type="radio" value="10">
  <label class="formFieldOption">10</label>
<input class="mainForm" id="Amount" name="Amount" type="radio" value="other">
  <label class="formFieldOption">Other:  $
    <input class="mainForm" id="Amount" name="Amount" size="10" type="text" value="10">
  </label>

通过此设置，单选按钮毫无意义。无论在文本字段中是什么，都会发送给Amount的内容。实际上，这很好，但我不希望人们在文本框中看到金额，除非他们指定了金额。有没有办法设置默认值，隐藏它，仍然可以编辑它？

我想到可能会将文本字段的名称和ID设为“Amount2”，给它一个空白值，然后将该值放入“Amount”（如果表单发送时存在）。这是我尝试使用的javascript代码：

var x=document.getElementById("Amount");
var y=document.getElementById("Amount2");
if (typeof x != "undefined") {
  y = x; }

不幸的是，这似乎没有做任何事情。我四处寻找改善这种情况的方法，但找不到任何东西。

理想情况下，表单将按照预期的方式工作 - 将10个数据集的数量选择为10，并且当选择Other的无线电时，文本字段才会起作用。这个提示非常感谢:)但是如果我可以将文本字段中的默认值设置为10而没有人能够看到，那么这并不是绝对必要的，所以这就是我真正需要的。

提前致谢！

Answer 1

您需要将.value附加到JavaScript：

var x=document.getElementById("Amount").value;

您需要调用表单的JavaScript onsubmit。

对于另一个问题：我认为除了你已经追求的JavaScript方式之外别无其他解决方案。

@RobG 20：谢谢你的解决方案！

@Jason：当然你可以用同样的功能做到这一点。

Answer 2

有一些问题：

var x=document.getElementById("Amount");
var y=document.getElementById("Amount2");
if (typeof x != "undefined") {
  y = x; 
}

getElementById 返回，元素或Null。如果它返回一个元素，那么x == y只有在 x 和 y 引用相同（DOM）对象时才会为真。您可能想要比较值。

由于 Amount 是表单控件，因此其值为字符串，因此：

if (typeof x != "undefined") {

将永远为真（因为typeof x返回'string'）。现在y = x只是将x的值赋给y，它不会更改 Amount2 的值。

你想要的可能是：

var x=document.getElementById("Amount").value;

if (x != "") {
  document.getElementById("Amount2").value = x; 
}

然而，为了得到你想要的东西，我认为你需要做类似以下的事情。如果选择10美元的收音机，则将“其他”设置为10美元。如果选择“其他”，则会清除该值，以便用户可以输入他们想要的内容。如果：

<form onsubmit="if (this.Amount2.value == '') this.Amount2.value = this.defaultAmount.value;">  
  <fieldset>
    <legend>Amount to send</legend>
      <label for="defaultAmount">$10<input id="defaultAmount" name="Amount" type="radio" value="10"
       onclick="this.form.Amount2.value = this.value">
      <label for="otherAmount">Other<input id="otherAmount" name="Amount" type="radio" value=""
       onclick="this.form.Amount2.value = this.value">
        <br>
      <label for="Amount2">Amount:  $<input ="Amount2" name="Amount2" value=""></label>
    <br>
    <input type="reset"><input type="submit" value="Send money!">
  </fieldset>
</form>

这仍然不能很好地工作，但它应该让你进入下一步。也许应该禁用Other字段，直到选中Other复选框，并且内联侦听器也应该替换为function，可能附加onload。但我会把剩下的留给你。 ; - ）

通常只需在输入中添加默认值并让用户将其更改为他们想要的内容就更简单。

Answer 3

这对我有用！

HTML：

我已经改变了身份证。现在它们都是不同的（Amount1，Amount2和OtherAmountInput）。我删除了文本输入的name属性，以避免在提交时将其与表单一起发送（您只需要cheked radio的值）。

<input class="mainForm" id="Amount1" name="Amount" type="radio" value="10" checked>
<label class="formFieldOption">10</label>
<input class="mainForm" id="Amount2" name="Amount" type="radio">
<label class="formFieldOption">Other:  $
    <input id="OtherAmountInput" class="mainForm" size="10" type="text">
</label>

使用Javascript：

当输入文本更改时，Amount2值会更改。干净又简单！

var Amount2 = document.getElementById("Amount2");
var OtherAmountInput = document.getElementById("OtherAmountInput");

OtherAmountInput.onchange = setAmountToRadio;

function setAmountToRadio(){
    Amount2.value = OtherAmountInput.value;
}

如何隐藏表单字段的默认值？

3 个答案: