Modifiable value outside of an input box 1

[Nevermoor]

Ok, hopefully there is just something really easy that I'm not finding, but I have a form with total boxes at the bottom. Obviously I can't let the user change their value so I have it working by using a disabled input box. Unfortunately, things like font color are sub-optimal this way, as the grey text makes everything hard to read. Is there some other object that I can use that will prohibit user input, have a value I can modify through JavaScript, and allow me to apply style sheets?

Thanks

 

[LV]

You can make the text box readonly and then using style make it look different from read-write boxes:

<input type=text readonly value=&quot;999&quot; style=&quot;background-color:lightgrey;font-weight:bolder;&quot;>

 

[Nevermoor]

That is somewhat better, I just wish there was a way to &quot;break out&quot; of the input box.

 

[dwarfthrower]

>> I just wish there was a way to &quot;break out&quot; of the input box

There is. Use a <span id=&quot;displayTotal&quot;>0.00</span> to display the value to the user, and a <input name=&quot;total&quot; type=&quot;hidden&quot; value=&quot;0.00&quot;> to hold the value you want passed with the form.

You can then update the span at the same time you update the total, only instead of just using [tt]document.formName.total.value = totalAmount;[/tt] you would use [tt]document.formName.total.value = totalAmount; document.getElementById('displayTotal').innerText = totalAmount;[/tt]

You can then set the style of the displayTotal <span> to whatever you like.

 

[Nevermoor]

wonderful! that was exactly what i needed

Thanks

 

[LV]

Or you can style the input box so it won't look like one, then there is no need to have an extra hidden control:

<input type=text readonly value=&quot;test&quot; style=&quot;font-weight:bolder;border:0px;&quot;>

 

[clarkin]

I think DT's solution is a better one - I've heard the readonly attribute isn't very well supported in browsers yet

Definitely use a hidden form field to store 'total' values, regardless what you use to display them.
Then, even if they can change the displayed value (say, for example readonly isn't supported by their browser) it won't matter because you use the total in the hidden field to work things out on the next page


Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[LV]

Well, the readonly attribute is out there since DOM Level 1, and works just fine in IE and Netscape. But is'a all a matter of personal preffernce.