javascript - how to prevent automatic form submission

Question

I am facing a problem that on my webpage there is textfield that receives barcode input, The barcode is written into the field by a barcode reader device.

Now what happens is, the barcode reader after writing the barcode in the field somehow automatically submits the form. I want to prevent that submission.

I tried doing this by using preventDefault() but still no success. Here is the code:

<form role="form" method="post" action="IssueBook" id="issueBookForm">
<input type="text" value="" required name="empId" id="empId" 
                            onblur="getEmpData(this)" />
<input type="text" value="" required name="barcode" id="barcode" 
                            onblur="checkBookExistence(this); checkEligibilityForUser();" />
</form>

var issueBookForm = document.getElementById("issueBookForm");
            issueBookForm.addEventListener('submit',    function(event) {
                event.preventDefault();
            });
            document.getElementById("submitButton").addEventListener('click',function(event){
                var choice = confirm('Are you sure you want to issue this book ?? ');
                if(choice === true){
                    issueBookForm.submit();
                }
                else false;
            });

Note: I only need to support browsers that have addEventListener. I know the above won't work on old IE or IE in compatibility mode, that's fine. I'm testing in Chrome.

You've said you're testing this on Chrome. The above **will** work provided the JavaScript you've quoted is run **after** the `form` element has been created (e.g., is in a `script` block *after* the `form`, not before it). — T.J. Crowder, Apr 24 '15 at 08:08
Well, [`select` isn't broken](https://pragprog.com/the-pragmatic-programmer/extracts/tips). The problem lies in something outside what you've quoted. You'll have to use the debugger built into Chrome to figure it out (that's always your first step, of course). — T.J. Crowder, Apr 24 '15 at 08:11
The only other thing that could be breaking it is if you have another element with `id="issueBookForm"` in the HTML (perhaps a copy and paste error). When faced with a document with more than one element with the same `id`, browsers usually return the first element with the `id` from `getElementById` (they're not required to, but they mostly seem to). — T.J. Crowder, Apr 24 '15 at 08:12
ok !! I will try using debugger, and no the id is unique, that was the first thing i checked — sensitive_piece_of_horseflesh, Apr 24 '15 at 08:14

score 0 · Answer 1 · answered Apr 24 '15 at 07:57

0

You can use the onsubmit event to call a JavaScript where you can prevent the submit by returning true and false

answered Apr 24 '15 at 07:57

Alexander Grasberger

356
2
10

1

i am doing the same by using prevent default(as shown in the code) , that should work , right ??? – sensitive_piece_of_horseflesh Apr 24 '15 at 07:57
I haven't tried that before because onsubmit is the way closely everyone in the industry does it, and its also the way onsubmit is made for. – Alexander Grasberger Apr 25 '15 at 06:43
So if you only want to stop the submit if the user presses enter, that's easy, make that on submit function, and call it, then in the sender and event objects its easy to find out if it was the button or the key – Alexander Grasberger Apr 25 '15 at 06:46

score 0 · Accepted Answer · answered Apr 24 '15 at 09:41

Ok I solved the with the help of my freind , this might not be the best solution but it works :

var x, inputs = document.querySelectorAll("input[type='text']");
        for (x in inputs) {
            if (inputs[x] instanceof Element) {
                inputs[x].addEventListener('keyup', function(event) {
                    if (event.keyCode == 13)
                        return false;
                });
            }
        }

This helps preventing form submit on pressing enter on any of the text fields and the other thing I did was to change the input type from submit to button.

javascript - how to prevent automatic form submission

2 Answers2