Cardswiper data into hidden inputfield

Cardswiper data into hidden inputfield

Hi guys

I've just gotten a MagTek cardswiper in the door. It works exactly like a keyboard. Once you swipe a card through it it just writes in the text string from the card onto where ever focus is for the cursor.

So if you have MS word open it writes it there or if you have notepad etc.

I have a webpage where a user needs to write in some personal data every time a new client is created in the system. Here is where the cardswiper comes in handy. Once the user of the website is on my create new user page. I want her to be able to just swipe the card and then i can auto populate firstname, lastname and SSN in to the 3 correct fields.

My approach is that i wanted to create a hidden input box which has focus when the page renders. Then on its change event i grab the value of the hidden textbox. When the textfield is not hidden it works. Looks like this.

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Patient.Model.Patient>" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        Create
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <script type="text/javascript">

            var dataString = "";

            $(document).ready(function () {

                //Give the hidden field focus when the page has loaded
                $('#patientData').focus();

            });

            $(function () {
                $('#patientData').change(function () {

                    dataString = $('#patientData').val();
                    alert(dataString);
                });
            });

        </script>
        <h2>
            Check in a new patient</h2>
        <% using (Html.BeginForm())
           {%>
        <%= Html.ValidationSummary(true) %>
        <fieldset class="createGrid">
            <legend>Input data into the fields</legend>
            <div class="editor-label">
                <%= Html.LabelFor(model => model.PatientFirstName) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.PatientFirstName) %>
                <%= Html.ValidationMessageFor(model => model.PatientFirstName) %>
            </div>
            <div class="editor-label">
                <%= Html.LabelFor(model => model.PatientMiddleName) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.PatientMiddleName) %>
                <%= Html.ValidationMessageFor(model => model.PatientMiddleName) %>
            </div>
            <div class="editor-label">
                <%= Html.LabelFor(model => model.PatientLastName) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.PatientLastName) %>
                <%= Html.ValidationMessageFor(model => model.PatientLastName) %>
            </div>
            <div class="editor-label">
                <%= Html.LabelFor(model => model.PatientSSN) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.PatientSSN) %>
                <%= Html.ValidationMessageFor(model => model.PatientSSN) %>
            </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
        <% } %>
        <div>
            <%= Html.ActionLink("Back to List", "Index") %>
        </div>

       
        <div>
            <input type="text" id="patientData" value=""/>
        </div>

    </asp:Content>













































































But when i do a style="display:none" or change to type="hidden" or do it in javascript I am not getting anything in to my eventhandler. Something with hiding the textfield makes it impossible for the swiper to add the text to the field, even though it has focus.

Any suggestions how to solve this while keeping the card data hidden, since i need to chop it up behind the GUI and the added to the 3 correct fields before the user must see it.