How to hide the default value of a form field?

问题

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?

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.

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.

Thanks in advance!

回答1:

You need to append .value to your JavaScript:

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

And you need to invoke the JavaScript onsubmit of the form.

For the other question: I think there's no other solution than the JavaScript way which you are already pursuing.

@RobG 20: Thanks for the fix!

@Jason: Sure you can do this in the same function.

回答2:

There are some issues:

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

getElementById returns and element or Null. If it returns an element, then x == y will only be true if x and y reference the same (DOM) object. You probably want to compare values.

Since Amount is a form control, then its value is a string, so:

if (typeof x != "undefined") {

will always be true (because typeof x returns 'string'). Now y = x simply assigns the value of x to y, it does not change the value of Amount2.

What you want is probably:

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

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

However, to get what you want, I think you need to do something like the following. If the $10 radio is selected, it sets "Other" to $10. If "Other" is selected, it clears the value so users can enter what they want. If :

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

This still doesn't work that well, however it should get you to the next step. Maybe the Other field should be disabled until the Other checkbox is selected, and the inline listeners should also be replaced with function, possibly attached onload. But I'll leave the rest to you. ;-)

Generally is simpler to just put a default value in the input and let users change it to what they want.

回答3:

This is working for me!

HTML:

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:

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

来源：https://stackoverflow.com/questions/34077643/how-to-hide-the-default-value-of-a-form-field

标签

javascript

html

forms