如何隐藏表单字段的默认值? [英] How to hide the default value of a form field?

问题描述

我有一个带有两个选项的表格-10和其他-然后在其他旁边有一个文本字段，因此您可以输入所需的金额.这是我现在设置的方式:

I have a form with two options - 10 and Other - and then a text field next to Other so you can enter a desired amount. Here's the way I have it set up now:

<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>

使用此设置，单选按钮将变得毫无意义.文本字段中的内容就是要发送的金额.实际上，这很好，但是我不希望人们在文本框中看到一个金额，除非他们指定一个.有什么方法可以设置默认值，隐藏它并仍使其可编辑?

With this setup, the radio buttons are meaningless. Whatever's in the text field is what's getting sent for Amount. This is fine, actually, but I don't want people to see an amount in the text box unless they specify one. Is there some way to set a default value, hide it, and still let it be editable?

我想到了可能要使文本字段的名称和ID为"Amount2"，并为其提供一个空白值，然后在发送表单时将该值放入"Amount"(如果存在).这是我尝试使用的javascript代码:

I thought of maybe making the text field's name and id "Amount2", giving it a blank value, then placing that value into "Amount" if it exists when the form is sent. Here's the javascript code I tried to use for that:

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

不幸的是，这似乎没有任何作用.我四处寻找改善方法，但找不到任何东西.

Unfortunately this didn't seem to do anything. I looked around for ways to improve this, but couldn't find anything.

理想情况下，该表单将按预期的方式工作-选取10个单选按钮会将金额设置为10，并且只有在选择其他"选单时，文本字段才起作用.非常感谢您提供提示:)但是，如果我可以在文本字段中将默认值设置为10而不让别人看不到它，那么这并不是绝对必要的，所以这就是我真正需要的.

Ideally, the form would work the way it's supposed to - picking the radio for 10 sets the amount to 10, and the text field only comes into play when the radio for Other is picked. Tips for this would be much appreciated :) But this isn't strictly necessary if I can set the default value in the text field to 10 without people being able to see that, so that's all I really need.

提前谢谢！

推荐答案

这对我有用！

HTML:

我已经更改了ID.现在它们都是不同的(Amount1，Amount2和OtherAmountInput).我删除了文本输入的name属性，以避免在提交时随表单一起发送(您只希望选中的单选按钮的值).

I have changed the id's. Now they are all diferent (Amount1, Amount2 and OtherAmountInput). I have deleted the name attribute of the text input to avoid it to be sent with the form when you submit it (you only want the value of the 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:

Javascript:

输入文本更改时，Amount2值也会更改.干净又容易！

When the input text changes, the Amount2 value changes. Clean and easy!

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

OtherAmountInput.onchange = setAmountToRadio;

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

这篇关于如何隐藏表单字段的默认值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！