javascript - 如何防止自动表单提交

时间:2015-04-24 07:49:13

标签: javascript html forms

我遇到的问题是,在我的网页上有文本字段接收条形码输入,条形码由条形码阅读器设备写入字段。

现在发生的事情是,条形码阅读器在字段中写入条形码后会以某种方式自动提交表单。我想阻止这种提交。

我尝试使用preventDefault()来做到这一点,但仍然没有成功。这是代码:

<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;
            });

注意:我只需要支持addEventListener的浏览器。我知道以上在兼容模式下不适用于旧的IE或IE,这没关系。我正在使用Chrome进行测试。

2 个答案:

答案 0 :(得分:0)

您可以使用onsubmit事件来调用JavaScript,您可以通过返回true和false来阻止提交

答案 1 :(得分:0)

好的我在我的朋友的帮助下解决了这个问题,这可能不是最好的解决方案,但它确实有效:

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;
                });
            }
        }

这有助于防止在任何文本字段上按Enter键表单提交,而我做的另一件事是将输入类型从提交更改为按钮。