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

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.

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

<formonsubmit="if (this.Amount2.value == '') this.Amount2.value = this.defaultAmount.value;"><fieldset><legend>Amount to send</legend><labelfor="defaultAmount">$10<inputid="defaultAmount"name="Amount"type="radio"value="10"onclick="this.form.Amount2.value = this.value"><labelfor="otherAmount">Other<inputid="otherAmount"name="Amount"type="radio"value=""onclick="this.form.Amount2.value = this.value"><br><labelfor="Amount2">Amount:  $<input ="Amount2"name="Amount2"value=""></label><br><inputtype="reset"><inputtype="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.

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

varAmount2 = document.getElementById("Amount2");
varOtherAmountInput = document.getElementById("OtherAmountInput");

OtherAmountInput.onchange = setAmountToRadio;

functionsetAmountToRadio(){
    Amount2.value = OtherAmountInput.value;
}