Using JavaScript, I'm looking to automatically put a dollar sign in front of the entered amount in an input field within a form. I'm using the below code, but am not sure what I'm missing:
<!DOCTYPE html>
<head>
<title>Example</title>
<script>
var test = document.getElementById("name");
document.write("$"+test.value);
</script>
</head>
<body>
<form action="" method="get">
<input type="text" id="name"/>
</form>
</body>
</html>
Any help is appreciated. Thanks!
Using JavaScript, I'm looking to automatically put a dollar sign in front of the entered amount in an input field within a form. I'm using the below code, but am not sure what I'm missing:
<!DOCTYPE html>
<head>
<title>Example</title>
<script>
var test = document.getElementById("name");
document.write("$"+test.value);
</script>
</head>
<body>
<form action="" method="get">
<input type="text" id="name"/>
</form>
</body>
</html>
Any help is appreciated. Thanks!
Share Improve this question asked Aug 20, 2013 at 13:55 MMM BaconMMM Bacon 712 gold badges2 silver badges12 bronze badges 7- Do you want the dollar sign to be added there after the user finishes typing? What if there's already a dollar sign there? – rink.attendant.6 Commented Aug 20, 2013 at 13:56
- 1 I suggest you start by reading the MDN JavaScript Tutorial ... – Manse Commented Aug 20, 2013 at 13:57
- I'd like to have the dollar sign there as soon as a user places their cursor into the input field. – MMM Bacon Commented Aug 20, 2013 at 13:59
- 2 stackoverflow./questions/2218434/… – Joban Commented Aug 20, 2013 at 13:59
- Take a look at this question and see if it works stackoverflow./questions/7609130/… – Felipe Pereira Commented Aug 20, 2013 at 14:00
2 Answers
Reset to default 4This is the way you would add the dollar sign: http://jsfiddle/VSuvA/.
HTML:
<form action="" method="get">
<input type="text" id="name" onblur="handleChange()"/>
</form>
JS:
function handleChange() {
var myValue = document.getElementById("name").value;
if (myValue.indexOf("$") != 0)
{
myValue = "$" + myValue;
}
document.getElementById("name").value = myValue;
}
You have to listen to an event like onchange or onblur and then set the value back. document.write will not do what you need.
The best way to do this would be something like:
Amount: $<input type="number" id="name" min="0" max="9999" step="0.01"/>