Setting a default value in forms and protecting it

H

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! :))
 
V

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="..." />
 
I

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?
 
G

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.
 
D

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
 
J

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.
 
O

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...
 
J

John Postlethwait

One said:
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.
 
V

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.
 
Joined
May 29, 2012
Messages
1
Reaction score
0
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" />
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top