Javascript preventing submit of a form after carriage return

Question

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

focus on first field
scan and enter data into the first field
switch the focus to the second field
scan and enter data into the second field
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>

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

score 0 · Accepted Answer · edited May 23 '17 at 11:59

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 :)

edited May 23 '17 at 11:59

Community

1
1

answered Nov 24 '15 at 12:02

confusedandtired

139
1
12

Javascript preventing submit of a form after carriage return

1 Answers1