Setting a default value in forms and protecting it

[hanseymoon]

How do you create a text input box, which shows a default value of 1+
and blocks the user from deleting it? Thanks so much! )

 

[vynogradov]

How do you create a text input box, which shows a default value of 1+
and blocks the user from deleting it? Thanks so much! )

If you want a text field not editable by user a.k.a. read-only, you
should use respective attribute:

<input type="text" name="super_field" value="1+" readonly="readonly" />

(this is an xhtml syntax)

If you want your form having a parameter but it is not necessary to
show it to the user it's appropriate to use a hidden field:

<input type="hidden" name="...." value="..." />

 

[insideview]

If you want a text field not editable by user a.k.a. read-only, you
should use respective attribute:

<input type="text" name="super_field" value="1+" readonly="readonly" />

(this is an xhtml syntax)

If you want your form having a parameter but it is not necessary to
show it to the user it's appropriate to use a hidden field:

<input type="hidden" name="...." value="..." />

Is it possible to have your cake and eat it too, that is have a text
input that works as a input, displaying 1+, and allowing the user to
input more, while not allowing 1+ to be deleted? Is this beyond the
limits of JS?

 

[Gary Hasler]

Is it possible to have your cake and eat it too, that is have a text
input that works as a input, displaying 1+, and allowing the user to
input more, while not allowing 1+ to be deleted? Is this beyond the
limits of JS?

You could create 2 elements right next to each other; one just static
text displaying "1+' and the other an actual text input field; carefully
set all the colors, margins, and borders so the user doesn't see the
transition between them. Then when the form is submitted, add the "1+'
to the text value using JS.

 

[Danny]

How do you create a text input box, which shows a default value of 1+
and blocks the user from deleting it? Thanks so much! )

<input type="text" value="1+" readonly>

Danny

 

[John Postlethwait]

Is it possible to have your cake and eat it too, that is have a text
input that works as a input, displaying 1+, and allowing the user to
input more, while not allowing 1+ to be deleted? Is this beyond the
limits of JS?

You can use the onchange event handler for this.
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onchange.asp

Essentially apply the onchange handler to the form element, make the
handler a function which checks of the user has added text to the form,
or subtracted it, something like:

function checkFormValue(formElement)
{
if(formElement.value.length < 3)
{
formElement.value = "1 + ";
}
}

You can apply this to the form element many ways, the easiest would be
to do:
<input type="text" name="addMoreToMe" id="addMoreToMe" value="1 +"
onchange="checkFormValue(this);" />

Essentially what this does is checks if the length of the form is less
than three, reset the value to the original value. This is a pretty
basic example, as there are ways around it, so be sure to validate the
form properly, but I believe it should be a start for you.

One of the ways around this simple example would be someone pasting
text over the form value, the onchange event handler would never be
fired before the value is less than three as long as whatever they
paste into the form is a string with a length greater than three
(characters.) For example if the form is there, with the "1 +" in it,
and I select the "1 +" and paste "hsdhuhfsfdufh" over it, the above
function I wrote will not correct it.

 

[One Dumm Hikk]

On Oct 15, 3:41 am, "John Postlethwait" <[email protected]>
wrote:

Essentially apply the onchange handler to the form element, make the
handler a function which checks of the user has added text to the form,
or subtracted it, something like:

function checkFormValue(formElement)
{
if(formElement.value.length < 3)
{
formElement.value = "1 + ";
}
}

Check the first two to four characters to see if they match 1+, 1 +, or
1+ , and then add it back.....

Don't make it harder than it has to be

But, your function doesn't work the way you think it would with regards
to what the OP asked. Test it. Type in "Humpty Dumpty" and see what
gets changed...

 

[John Postlethwait]

On Oct 15, 3:41 am, "John Postlethwait" <[email protected]>
wrote:



Check the first two to four characters to see if they match 1+, 1 +, or
1+ , and then add it back.....

Don't make it harder than it has to be

But, your function doesn't work the way you think it would with regards
to what the OP asked. Test it. Type in "Humpty Dumpty" and see what
gets changed...

My mistake, the "onchange" handler doesn't work as I described... On
firefox the event is not fired until the form element loses focus, or
blurs. Changing it to "onkeypress" in the above example I gave works
well in Firefox, unfortunately it doesnt work in IE so you will have to
use keydown instead on IE.

I also agree with your solution. Checking to ensure the first parts of
the string in the form have 1+ or something similar is a better way to
go.

 

[vynogradov]

myTextElement.onkeypress = function() {
if(!this.value.match(/^1\+/)) this.value = '1+' + this.value;
}

this will check if field value stars with '1+' on every key pressed.
Typing though is complicated.

The question is why this behaviour is needed.

 

[shaval]

use two textBoxes like this:
<input type="text" value="+1" readonly="readonly" style="width:10px;border-right:0px;"/><input type="text" style="border-left:0px" />