javascript - 如何以与单击按钮并按 'enter' 相同的方式提交表单

Question

我有一个表单，当单击按钮时，当前正在提交一个函数，如下所示，并通过 ajax 请求接收一个值(下面的代码在单击按钮时起作用)。如何让表单在按“enter”键时也起作用(当前会出现 405 错误)？

我尝试过各种 onSubmit 函数，但它们似乎更适合验证。我确信我以前做过这个……只是发现很难在网上找到这个问题的答案。我想我可以在表单上创建一个新的事件监听器来执行此操作，但是通常完成的最好最简洁的方法是什么，也许不需要进入脚本标记？

    <form method="post">
            Check if domain available: <input type="text" name="domainURL" id="domainURL">&nbsp;&nbsp;
            <button id="clickMe" type="button" value="clickme" onclick="checkURLs(this.form.domainURL.value)">
            do it</button>
    </form>

<div id="availableDomains"></div>



<script>
    const checkURLs = (domainURL) => {
        document.querySelector('#availableDomains').innerHTML = 'Loading...'
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.querySelector('#availableDomains').innerHTML = ''
                responseArray = this.responseText.split(/\n/);
                responseArray.forEach(bit => {
                    var newDiv = document.createElement('div')
                    document.querySelector('#availableDomains').appendChild(newDiv)
                    newDiv.innerHTML = bit
                })
            }
        };
        xhttp.open('GET', 'http://localhost:3000/domainfinder/domain/' + domainURL, true);
        xhttp.send();
    }
</script>

这是我的快速服务器代码，以防万一

const whois = require('whois-info');
const express = require('express');
const app = express();

app.get('/domainfinder/domain/:domainURL', (req, res) => {
  const domainURL = req.params.domainURL;

  //fix CORS issues
  res.set({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': true,
    'Access-Control-Allow-Methods': 'POST, GET, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Content-Type': 'text/plain'
  })

  let tests = [domainURL];
  [...tests].forEach(domain => {
    whois.lookup(domain)
      .then(data => res.send(data))
      .catch(e => console.log(domain, e.message))
  })
});

app.listen(3000, () => console.log('app listening on port 3000!'));

Answer 1

2 个修复:

1. 在表单上使用 onSubmit 属性并为其提供提交处理函数。在函数中使用 serializeArray 获取表单的值。
2. 您可以像以前一样定义提交按钮，但应将 input 与 type="submit" 结合使用。
3. 完成上述 2 个修复后，每当用户处于输入状态并单击 enter 时，或者当用户单击提交按钮时，都会调用提交函数。

注意:serializeArray 仅适用于 jQuery!如果您仅使用 js，则可以通过不同的方式检索数据。

注 2:我从 checkURLs 函数返回了一个错误值，并在 onSubmit 属性中返回该值，否则表单将从代码片段中消失。

function checkURLs() {
  console.log($('#form1').serializeArray());
  // do whatever you want here
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="post" onSubmit="return checkURLs()">
  Check if domain available:
  <input type="text" name="domainURL" id="domainURL">&nbsp;&nbsp;
  <input id="clickMe" type="submit" value="clickme">
</form>