Home/ Questions/Q 7710337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:06:04+00:00

I have a real basic form (code below) with a bunch of back-panel PhP.

  • 0

I have a real basic form (code below) with a bunch of back-panel PhP. There is a scanner being used to input the data, but instead of tab after each item, it sends an “enter” command.

Is it viable to add javascript to cause enter to instead tab to the next form field, and upon the last form field, submit it instead? I have found a few scripts online, but none that I have tried have worked in Firefox/Chrome.

CODE:

<html><head><title>Barcode Generation</title></head><body>
<fieldset style="width: 300px;">
<form action="generator.php" method="post">
Invoice Number:<input type="text" name="invoice" /><br />
Model Number:<input type="text" name="model" /><br />
Serial Number:<input type="text" name="serial" /><br />
<input type="hidden" name="reload" value="true" />
<input type="submit" />
</form><br /><a href=null>en espanol</a></fieldset>
</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes.

    You’ll need to implement an ‘onsubmit’ handler for the form which checks that the [ENTER] key was pressed from the “correct” field (or the form is adequately filled). If not, the handler should just return false (to prevent submission). (Only need to do the next bit.)

    Then you’ll need to implement an ‘onkeypress’ handler for each input that can be scanned, and when you get an [ENTER] key, call .preventDefault() prevent submission of the form, and trigger a [TAB] ‘keypress’ event .focus() the next field.

    Update: this works for me:

    <html>
  <head>
    <title>Barcode Generation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

      function validate() {
        return ((/\S+/.test($('input[name="invoice"]').val())) &&
                (/\S+/.test($('input[name="model"]').val())) &&
                (/\S+/.test($('input[name="serial"]').val())));
      }

      $().ready(function(){
        $('#generator_form')
          .submit(validate)
          .find('input[type="text"]')
            .keypress(function(evt) {
              if (evt.which == 13) { // ENTER pressed
                var next_elem;
                if (evt.target.name == 'invoice') { next_elem = $('input[name="model"]'); }
                else if (evt.target.name == 'model') { next_elem = $('input[name="serial"]'); }
                else if (evt.target.name == 'serial') { return validate(); }
                $(next_elem).focus();
                return false;
              } else { // some other key pressed
                return true;
              }
            })
          .end();
      });
    </script>
  </head>
  <body>
    <fieldset style="width: 300px;">
      <form id="generator_form" action="generator.php" method="post">
        Invoice Number:<input type="text" name="invoice" /><br />
        Model Number:<input type="text" name="model" /><br />
        Serial Number:<input type="text" name="serial" /><br />
        <input type="hidden" name="reload" value="true" />
        <input type="submit" />
      </form>
      <br />
      <a href=null>en espanol</a>
    </fieldset>
  </body>
</html>

    Updated: to submit on [ENTER] in ‘serial’ field.

    Updated: to properly validate in all cases.

    • 0