Question

我有一个HTML表单和下面的一些JavaScript代码。一切正常。但是令我困扰的是，尽管其他所有功能都在函数中，但是我捕获提交按钮的方式却不在函数中。

那么我这样做正确吗？

我的表单：

<form autocomplete="off" action="/cgi-bin/prl.pl">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Pick a country" autofocus>
<input id="113" type="submit" value="Ok">
</form>

我的脚本的顶部：

<script>

var form = document.querySelector("form");

form.addEventListener("submit", function(e) 
{
  //////insert code to validate that 
  //////specific data is in my form

  e.preventDefault();
});

function setFocusToInput()
{
    var textbox = document.getElementById("myInput");
    textbox.focus();
}

function autocomplete(inp, arr) 
{
  var currentFocus;

Answer 1

<form autocomplete="off" action="/cgi-bin/prl.pl" id="my-form"> 
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Pick a country" autofocus>
<input id="113" type="submit" value="Ok">
</form>

function processForm(e) {
        if (e.preventDefault) e.preventDefault();

        /* do what you want with the form */

        // You must return false to prevent the default form behavior
        return false;
    }

    var form = document.getElementById('my-form');
    if (form.attachEvent) {
        form.attachEvent("submit", processForm);
    } else {
        form.addEventListener("submit", processForm);
    }

Answer 2

您的代码没有任何问题，但是，如果您真的想使其成为函数，则可以将onSubmit添加到<form>，并编写一个JS函数来对其进行处理。像这样的东西：

HTML： <form onsubmit="process()">...</form>

JS： function process() {}

Answer 3

JavaScript的一致性并没有错，但是如果您喜欢它，您可以执行以下操作：

function validateForm(ev){
    // do some validation
    var valid = false;
    if (!valid){
        ev.preventDefault();
    }
}

var form = document.querySelector("form");
form.addEventListener("submit", validateForm);

请注意，附加事件处理程序时没有()

我的代码可以捕获表单上的提交按钮，但是可以正确执行吗？

3 个答案: