如何通过单击按钮并按“输入”以相同的方式提交表单

Question

我有一个表单，当单击按钮时，当前正在提交一个函数，如下所示，并通过 ajax 请求接收值（单击按钮时，下面的代码有效）。 我怎样才能让表格也能按“回车”（目前出现 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

将类型更改为“提交”

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

Answer 2

2个修复：

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

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

注意 2：我从checkURLs函数返回了一个 false 值并在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>