如何使用提交按钮和输入按钮提交值？答案

【问题标题】：How to submit a value with a submit button AND by the enter button?如何使用提交按钮和输入按钮提交值？
【发布时间】：2020-03-14 14:08:32
【问题描述】：

有人可以帮我写一些 javascript 代码吗？

我会在点击提交按钮并按下“Enter”键后启动一个 javascript 函数。我已经制作了这段代码，单独它可以工作，但是“Enter”键一起不起作用。出了什么问题？

谢谢！！

<form onsubmit="SubmitFormData(); return false;" id="myForm" method="post">

 Name:    <input name="name" id="name" type="text" /><br />


<input type="submit" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>

<script>
var input = document.getElementById("name");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   SubmitFormData();
  }
});
</script>

function SubmitFormData() {
var name = $("#name").val();
$.post("submit.php", { name: name },
function(data) {
 $('#results').html(data);
 $('#myForm')[0].reset();
});
}

【问题讨论】：

你的意思是用户需要两者都做吗？同时或快速连续点击提交按钮和回车键？
不，很抱歉给您带来不便。它是提交按钮或回车键。但该功能必须由两者共同发挥作用。
如果你想在keyup回调中提交表单，你不需要document.getElementById("submitFormData").click();。直接调用SubmitFormData()即可。
谢谢，喜欢这样吗？它还没有工作......
按回车时页面还在刷新。

标签： javascript eventhandler

【解决方案1】：

您的SubmitFormData() 函数只有在您单击input 按钮时才会起作用（您已向其添加了onclick 属性）。

您应该删除它并将以下属性添加到您的form：onsubmit="SubmitFormData(); return false;"

Obs.：更改输入中的 type 属性。 type="button" 是错误的。使用type="submit"。

【讨论】：

谢谢！删除整个提交按钮？当我只删除 onclick 时，两者都不再起作用了。
不，您不需要删除整个按钮。只需删除 onclick 属性，因为您不再需要它了。不要忘记将type 属性更改为submit。
嗨威廉，谢谢！现在可以了！只是一个问题，按下回车按钮后输入没有保存。我想回应输入，你能再帮我一次吗？
是的，您可以使用 serialize 函数将整个表单数据发送到您的 json 请求，因此您不需要为表单的每个输入声明变量。请按照下列步骤操作： 1. 将onsubmit="SubmitFormData(); return false;" 更改为onsubmit="SubmitFormData(this); return false;" 2. 将function SubmitFormData() { 更改为function SubmitFormData(form) { 3. 将var name = $("#name").val(); 更改为var form_data = $(form).serialize(); 4. 将$.post("submit.php", { name: name }, 更改为$.post("submit.php", form_data, 希望对您有所帮助！ =)