0

I'm using a barcode-scanner to add data to some html fields. What I want to do is the following

  1. focus on first field
  2. scan and enter data into the first field
  3. switch the focus to the second field
  4. scan and enter data into the second field
  5. submit form

I tried two approaches:

  • Catching the carriage return sent by the hand scanner
  • Catching every keystroke in the textfield

Posted is the latter one.

It works sofar, but only if I leave my debug alerts in the code... If I remove them, the form is submitted...

Any idea why?

    <html>
<head>
<head>
<title>Webinterface</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<script type="text/javascript">
    function processForm(e) {
    if (e.preventDefault) e.preventDefault();
    return false;
}
function checkFieldC(text)
{
    if(text.length==6){
        alert("C1");
        if(document.comform.Destination.value.length>0){
            alert("C2a");
            document.forms["comform"].submit();
            return true;
        }else{    
            alert("C2b");
            document.comform.Destination.focus();            
            return false;
        }
    }
    return false;
}
function checkFieldD(text)
{

    if(text.length==9){
        if(document.comform.Container.value.length>0){
            alert("D2a");
            document.forms["comform"].submit();
            return true;
        }else{    
            alert("D2b");
            document.comform.Container.focus();            
            return false;
        }
    }
    return false;
}
</script>

<form method="POST" name="comform" action="DoSomething.php">

<br>
<table width="90%"  border="0">

    <tr>
        <td valign="top" width="150">Container (6 digits)</td>
        <td><input name="comvalue[]" type="text" id="Container" size="10" maxlength="6" onkeyup="checkFieldC(this.value)" ></td>
    </tr>
    <br>
    <tr>
        <td valign="top" width="150">Destination:</td>
        <td><input name="comvalue[]" type="text" id="Destination" size="10" onkeyup="checkFieldD(this.value)"></td> 

    </tr>

    <tr>
     <td>Confirm</td>
     <td><button name="s2" onClick="submit()" class="cssButton1">Confirm</button></td>
    </tr>    
</table>
</font>
</form>
</body>
</html>
confusedandtired
  • 139
  • 1
  • 12
  • can you place your code in jsfiddle? – Harsh Sanghani Nov 24 '15 at 09:48
  • Add `onsumbit="return processForm(window.event);"` to your `
    ` tag and validate if both fields were actually filled in. On the other hand, setting the inputs as required, giving them a pattern to validate them should also do the trick and then you don't have to do your validation in Javascript
     – Icepickle Nov 24 '15 at 09:48
  • @HarshSanghani There are [snipplets](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) on stackoverflow. No reason for jsfiddle. – k0pernikus Nov 24 '15 at 09:49
  • @Icepickle I did what you suggested, but the form is submitted anyway. – confusedandtired Nov 24 '15 at 10:03
  • Did you use "`onsubmit`"? (Icepickle has a typo there). Does the validation actually run? – RoToRa Nov 24 '15 at 11:05
  • I saw the typo and corrected it. I put an alert into the method, I get that alert but the form is still submitted: function processForm(e) { alert("Inside"); return false; } – confusedandtired Nov 24 '15 at 11:48

1 Answers1

0

Ok, I found a solution deep in this post how to prevent buttons from submitting forms

After defining the button type

<button type="button">Button</button>

it works perfectly. Thanks for your support :)

Community
  • 1
  • 1
confusedandtired
  • 139
  • 1
  • 12