A hidden yet editable form field?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mitamata
    New Member
    • Aug 2007
    • 3

    A hidden yet editable form field?

    I'm making a website application using php and smarty template. The application will be used to follow the production of an item through different phases. The item is identified with a barcode, so we'll be using a barcode scanner. The app will be running on linux OS, using Firefox.

    Here's the thing. I've gotten the barcode scanner to work with no problem. I have a form, a text input field and an onChange event that submits the form. All works great.
    But now I need to hide this text input field. The users are not supposed to see it or be able to edit it's value. The barcode scanner acts like a keyboard, so what I really need is some sort of a text input field that will always be focused (users can scan in several barcodes, each of them needs to be checked and submited), allow edits, automatically submit a value and yet not be seen by the user.


    Is this possible and if yes, how would I go about achieving this? Any and all ideas/suggestions are welcome.

    Sorry if I'm missing something obvious, I haven't been doing this very long. I tried searching Google, but all I get is info on "hidden" input types and no ways to edit them that I could use.
  • epots9
    Recognized Expert Top Contributor
    • May 2007
    • 1352

    #2
    Hi mitamata welcome to TSDN,

    inside the textbox is it the barcode that shows up in there? if so u can make it readonly so u can only change it through javascript.

    but if u really don't want anyone to see it make it of type hidden but u will still require javascript to edit it.

    can u post your code that puts the value(s) into the textbox.

    thank you

    Comment

    • mitamata
      New Member
      • Aug 2007
      • 3

      #3
      There is no code needed to input the values. The barcode scanner acts as a keyboard: it scans the barcode, converts it to characters and sends those characters to the system (it always adds the enter key after the barcode). I could get the exact same result if I were to press multiple keys on the keyboard at the same time.

      I don't have the scanner here today, so I'm not sure if it acts exactly like a keyboard (I don't know how the onkey events would work). I do know that if I have a notepad open and I scan a barcode, the numbers show up in the notepad as plain text.

      Here's all the code that I have at the moment:
      Code:
      <form name="testform" method="post" action="">
      Barcode number: <input type="text" name="test" value="" onChange="document.testform.submit()">
      </form>
      As long as the "test" field has the focus, it works just like it should.


      The customer's request is that the field is hidden. If I can't figure it out, they'll just have to live with it being visible, but I'd really rather it were hidden.

      Here's a scenario of what I need to do.

      1. User opens a web page
      2. User scans a barcode
      3. Immediately after the barcode is scanned, an action happens (a form is submitted, a function is called,...). The barcode is checked against a database and the details of the item it belongs to populate the page.


      If I could have a visible field for this, I could do it. I'd just need to somehow keep the focus on it, all the time. The trick is to do it without a visible field.
      My knowledge of javascript is very basic, I don't know how to begin tackling this one.

      Thanks for the welcome. And thank you for taking the time to read my problem =)

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Does it enter the values one by one or all in one go?

        Comment

        • mitamata
          New Member
          • Aug 2007
          • 3

          #5
          Originally posted by acoder
          Does it enter the values one by one or all in one go?
          I tested it some more today. It looks to me like it sends the values in one by one. At least that's my guess.

          Code:
          <form name="testform" method="post" action="">
          Test: <input type="text" name="test" value="" onKeydown="newTest();" id="inputt">
          </form>
          For example: I scanned a code that translates into 70-79004F (the reader adds the enter key at the end of it). I had the newTest function pop up an alert with the value of the test field. When using the onKeydown event, the alert said "7" (because of the enter at the end, it closed right after it showed up). The same when triggering it with an onKeypress. When using the onKeyup event, the alert said "70".

          Does that help? >_>

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by mitamata
            I tested it some more today. It looks to me like it sends the values in one by one.
            In that case, take the key that is pressed and set the value of the hidden field to that value. Return false for the onkeydown to prevent anything being entered into the viewable text field.

            To get the value of the key entered, see link.

            Comment

            Working...