Setting a default value in forms and protecting it

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

  1. hanseymoon

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

  2. hanseymoon

    vynogradov Guest

    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="..." />
    vynogradov, Oct 13, 2006
    1. Advertisements

  3. hanseymoon

    insideview Guest

    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?
    insideview, Oct 13, 2006
  4. hanseymoon

    Gary Hasler Guest

    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
  5. hanseymoon

    Danny Guest

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

    Danny, Oct 14, 2006
  6. You can use the onchange event handler for this.

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

    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...
    One Dumm Hikk, Oct 15, 2006
  8. 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
    John Postlethwait, Oct 18, 2006
  9. hanseymoon

    vynogradov 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.
    vynogradov, Oct 18, 2006
  10. hanseymoon


    May 29, 2012
    Likes Received:
    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
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.