Setting a default value in forms and protecting it

Discussion in 'Javascript' started by hanseymoon@gmail.com, Oct 13, 2006.

  1. Guest

    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! :))
    , Oct 13, 2006
    #1
    1. Advertising

  2. Guest

    wrote:
    > 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="..." />
    , Oct 13, 2006
    #2
    1. Advertising

  3. Guest

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


    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?
    , Oct 13, 2006
    #3
  4. Gary Hasler Guest

    wrote:
    > 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.
    Gary Hasler, Oct 13, 2006
    #4
  5. Danny Guest

    wrote:

    > 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
    Danny, Oct 14, 2006
    #5
  6. wrote:
    > wrote:
    > > wrote:
    > > > 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="..." />

    >
    > 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.
    John Postlethwait, Oct 15, 2006
    #6
  7. On Oct 15, 3:41 am, "John Postlethwait" <>
    wrote:

    <snip>

    > 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...
    --
    Randy
    One Dumm Hikk, Oct 15, 2006
    #7
  8. One Dumm Hikk wrote:
    > On Oct 15, 3:41 am, "John Postlethwait" <>
    > wrote:
    >
    > <snip>
    >
    > > 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...
    > --
    > Randy


    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.
    John Postlethwait, Oct 18, 2006
    #8
  9. Guest

    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.
    , Oct 18, 2006
    #9
  10. shaval

    Joined:
    May 29, 2012
    Messages:
    1
    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" />
    shaval, May 29, 2012
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mike Kingscott

    Protecting PDFs with Forms Authentication?

    Mike Kingscott, Jun 21, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    465
    Mike Kingscott
    Jun 22, 2004
  2. Adam
    Replies:
    2
    Views:
    9,718
  3. CJ
    Replies:
    1
    Views:
    1,567
    Andrew Thompson
    Oct 29, 2004
  4. C Gillespie
    Replies:
    3
    Views:
    407
    Peter Hansen
    Mar 22, 2005
  5. Eric
    Replies:
    2
    Views:
    504
Loading...

Share This Page