0 Replies - 1787 Views - Last Post: 27 August 2012 - 11:01 AM

#1 skirkpatrick  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 18-February 08

Changing text field behavior

Posted 27 August 2012 - 11:01 AM

I am working on a small program to capture data from a barcode scanner and then update a database with the data. I initially created a form that would onload would focus on a field and the with an onchange event would jump to the next field and then with another onchange event would submit the form and do the database update. All works fine but doing the database update after the two scans is a little slow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script language="Javascript">
	function submitForm()
	{
	  document.form1.submit();
	}
 </script>
 </head>
<body>
<body onload="document.form1.barcode.focus()">

<form id="form1" name="form1" method="get" action="write_to_file.php">
  <label for="textfield"></label>
  <table width="403" border="1">
    <tr>
      <td width="200">Barcode</td>
      <td width="200">Vendor Roll ID</td>
    </tr>
    <tr>
      <td><input name="barcode" type="text" id="barcode" size="30" onchange="document.form1.vendor_id.focus()"/></td>
      <td><input name="vendor_id" type="text" id="vendor_id" size="30" onchange="javascript: submitForm();"/></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
</body>
</html>


So I decided to try to create a form that would dynamically add additional text fields to the form and also a submit button so the user could decide when they wanted to do the database update. All works fine when I am tabbing through the form - but with the scanner it see's the input as text and an enter. Therefore the form get submitted. Is there a way to tell the form that the text field need to be tabbed and not entered?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="Javascript">
var counter = 1;
var limit = 100;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Barcode " + (counter + 1) + " <br><input type='text' name='myInputs[]'  onchange=addInput2('dynamicInput2');onchange=SetFocus('test" + (counter + 2) + "'); id='test" + (counter + 1) + "'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>
<script language="Javascript">
var counter = 1;
var limit = 100;
function addInput2(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Vendor Roll ID " + (counter + 1) + " <br><input type='text' name='myInputs[]'  onchange=addInput('dynamicInput');onchange=SetFocus('test" + (counter + 2) + "') id='test" + (counter + 1) + "'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>
<script>
function SetFocus(test)
{
    var control = document.getElementById(test);
    if ( control != null )
    { 
    //alert(" value is empty");
        if ( control.focus != null )
        {
            control.focus();
        }
    }
}
</script>
<script>
function SetFocus(test2)
{
    var control = document.getElementById(test2);
    if ( control != null )
    { 
    //alert(" value is empty");
        if ( control.focus != null )
        {
            control.focus();
        }
    }
}
</script>

 </head>
<body>
<body onload="document.form1.barcode.focus()">

<form id="form1" name="form1" method="POST" action="php_test.php">

	<label for="textfield"></label>
  <table width="403" border="1">
    <tr>
      <td width="200">Barcode</td>
      <td width="200">Vendor Roll ID</td>
    </tr>
    <tr>
   <td> <div id="dynamicInput"><br><input type="text" name='myInputs[]' size="30" onchange="document.form1.vendor_id.focus();" id="barcode"></td>
   <td> <div id="dynamicInput2"><br><input type="text" name='myInputs[]' size="30" onchange="addInput('dynamicInput');SetFocus('test2');" id="vendor_id"></td>


	  </div>
	</tr>
       <td><input type="submit" name="submit" id="submit" value="Submit" /></td>
	  </table>
  <p>&nbsp;</p>
</form>
</body>
</html>



I don't know if I am explaining myself correctly - just ask if you need more clarification.

Thanks in advance,

Steve

Is This A Good Question/Topic? 0
  • +

Page 1 of 1