Using a variable to define default value in a form input
You can't assign variable to textbox via HTML. Instead place the value directly
input type="number" name="sum-due" readonly="readonly" value="5"
This is only possible using javascript
or jQuery
.
For eg:
<input id="my-input" type="number" name="sum-due" readonly="readonly" />
JS:
var totaldue = 5;
document.getElementById('my-input').value = totaldue;
UPDATES:
From your comments,
<script>
var totaldue = 10;
document.getElementById('paythis').value = totaldue;
</script>
<form id="pay1" action="hotguidebelize-com.cgi-data.com/webform/5627816.cgi"; method="post">
<label>Total amount due:</label>
<input id="paythis" type="number" name="sum-due" readonly="readonly" />
<input type="submit" value="Proceed To Payment" />
</form>
As I said before you can't assign variable to textbox via HTML. Following are the mistakes:
(1) There is no variable totaldue
assigned in your javascript.
var totaldue = 5;
(2) Try using <label>
tag. More Information from MDN.
(3) You're using document.getElementById
which refers id
selector. But you haven't specified the id in your input
tag. More Information from MDN
<input id="paythis" type="number" name="sum-due" readonly="readonly" />
Here is simple JSFiddle I have created for you.
Feel free to ask your doubts, when I get time I will reply back or you will get help from others.
Related videos on Youtube
Marie Carroll Rigby
Updated on September 16, 2022Comments
-
Marie Carroll Rigby over 1 year
I have a variable called
totaldue
, which I want to use as the default value when submitting a form. I have the codeinput type="number" name="sum-due" readonly="readonly" value=totaldue
But this doesn't display the content of totaldue in the form.
Is it possible to do this and if so what is the correct syntax?
Thx- Marie
-
Brandon Joyce almost 11 yearsIs this a javascript variable, or a server language variable?
-
-
Praveen almost 11 years@jeconner Thanks for the fiddle.
-
Marie Carroll Rigby almost 11 yearsAs a total newbie I am lost. So I know have <script> document.getElementById('paythis').value = totaldue; </script> <form id="pay1" action="hotguidebelize-com.cgi-data.com/webform/5627816.cgi" method="post"> Total amount due: <input type="number" name="sum-due" readonly="readonly" value=paythis> <input type="submit" value="Proceed To Payment" /> </form> but it just displays the word paythis and not the number from the variable. I know this is probably really basic stuff but I'm not getting it!
-
Praveen almost 11 years@MarieCarrollRigby Updated my answer. Take time to learn things.
-
JoBaxter over 9 yearsOne comment about the script part of the code. You can save a line by assigning the return value directly to the field. For example. <script>document.getElementById('paythis').value = 10;</script>