Barcode scanner and jquery ajax call?

Question

I am stuck with the following: I have a simple form on index.phpwith one input field. On button click the form makes a jquery ajax request to lookup.php which returns some data. This data is shown on index.php. So far nothing special and it works when i use the keyboard.

Now when i use the barcode scanner it doesn't work, with some trial and error it looks like the barcode scanner uses the "submit" handler. But in my case the ajax request is handled by

$("#btnSubmit").on("click",

and button btnSubmit is of the type=button and not submit.

How can i fix this so the barcode scanner is also making the ajax request? jquery submit with $.ajax doesn't seem to work

Answer 1

If you have a simple form like:

<div id="status"></div>
<form action="">
   <input id="foo"/>
   <input type="submit" value="Submit">
</form>

You can do:

$("form").submit(function(e) {
      e.preventDefault();
      $.ajax({
            url: "lookup.php",
            type: "POST",            // Can change this to get if required
            data: { foo: $("#foo").val(); },
            success: function(data) {
                     $("#status").html(data);      
            },
            error: function(jqXHR, textStatus, errorThrown) {
                   $("#status").text(textStatus);
            }
      });
});