在提交上向JavaScript显示“单元”表单数据 我觉得这应该很简单。因此，要么我完全错过了这里的问题的目的，也没有在同一上下文中读过的其他网站。 我没有...

Question

基本上，当单击

Submit

按钮时，我要做的就是将值输入到

text

框中的值（目前）。 似乎已经问过一百万次，但是我读过的问题没有回答我的问题（我不认为）。

eDit

感谢您的所有回应；最大的问题是我试图在表单元素之后调用的外部

JavaScript Function

文件中引用一个函数。 

不需要在提交表单处理程序功能中添加另一个

Javascript。我为为什么这种方法如此普遍感到困惑。如果您需要获取多个表单的所有值，该怎么办？写数十个元素选择器？

我认为以下内容要干净很多：

输入可以包含一个

Answer 1

属性，以简化其访问：

name

  function submitForm(event) {
    event.preventDefault()
    alert(event.target.elements.searchTerm.value)
  }

短，

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

function submitForm(that) {
  alert(that.searchTerm.value)
}

在处理程序本身中，您甚至可以直接访问值：

<form onsubmit="submitForm(this)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

由于处理程序本身具有隐式

<form onsubmit="alert(searchTerm)">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

（

details

）。

如果您通过JS注册事件处理程序，则已经指向表单元素的

with(this)

（在非lambda函数中），因此您也可以做

this

document.querySelector('#myForm').addEventListener('submit', function() {
  event.preventDefault()
  alert(this.elements.searchTerm.value)
});

最终，要将多个输入转换为键值对象，您可以使用

<form id="myForm">
  <input name="searchTerm"/>
  <button>Submit</button>
</form>

：（

2

）

Object.fromEntries

function submitForm(event) {
  event.preventDefault()
  const obj = Object.fromEntries(new FormData(event.target))
  // Prints: { searchTerm: "...", myCheckbox: "on" }
  console.log(obj)
  return false;
}

像这样的东西？

<form onsubmit="submitForm(event)">
  <input name="searchTerm"/>
  <input type="checkbox" name="myCheckbox"/>
  <button>Submit</button>
</form>

jsfiddle在这里：

https：//jsfiddle.net/km7rt62v/

wimits对于提交处理程序结束时防止默认行为很重要，否则该表格将发布并重新加载页面。

其他人已经证明，也可以使用表单元素的HTML属性，这是个人喜好，但是我更喜欢JS和HTML之间的更清洁的分离。

Answer 2

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value);
    return false;
};

这是一个纯粹的简单JavaScript。 您也可以使用jQuery。

return false;

onsubmit

submit形式：

Answer 3

$('#theform').submit(function() { 
    console.log($('#searchTerm').val());
    return false;
});

Html：

function checkForm(){
  console.log(document.getElementById('searchTerm').value);
  return false;
}

在单击按钮：

js：

<form onsubmit='return checkForm();'>
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

Html：

Answer 4

看到demo

here

当您在表格中包含提交类型的输入时，您可以使用称为

<form id="searchForm">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

的属性。这是一些文档

http：//www.w3schools.com/tags/ev_onsubmit.asp

。

代码看起来像这样

var searchTerm = document.getElementById('searchTerm');
var submitButton = document.getElementById('submitButton');

submitButton.onclick = function () {
  console.log(searchTerm.value);
};

要在外部文件中具有这样的功能，您最好的选择是在on Load事件中将提交事件接线：

Answer 5

onsubmit

jQuery版本：

Answer 6

<form onsubmit="submitForm()">
  <input type="text" id="searchTerm"/>
  <input type="submit" value="Submit" id="submitButton" />
</form>

<script>
  function submitForm() {
    let input = document.querySelector('#searchTerm');
    console.log(input.value);
    return false;
  }
</script>

window.onload=function() {
  document.getElementById("form1").onsubmit=function(e) {
    e=e?e:event;
    e.preventDefault(); // cancel the submit
    var val = document.getElementById("searchTerm").value;
    console.log(val);
  }  
}

您用jQuery标记了这个，所以这是一个jQuery的答案。您需要使用的是

<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

活动处理程序。

$(function() {
  $("#form1").on("submit",function(e) {
    e.preventDefault(); // cancel the submit
    var val = $("#searchTerm").val();
    console.log(val);
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" id="searchTerm" />
  <input type="submit" value="Submit" id="submitButton" />
</form>

该代码将将处理程序附加到

.submit()

事件：

事件：

Answer 7

因此，主要问题是我在

$("form").submit(function(e) {
    console.log("form data: %o", $(this).find("#searchTerm").val());
    e.preventDefault();
});

元素的底部包括了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input type="text" id="searchTerm" />
    <input type="submit" value="Submit" id="submitButton" />
</form>

元素，链接到我的外部JavaScript文件；这意味着在创建表单时，不知道我在说什么JavaScript函数。

感谢所有帮助的人，这是解决方案。

html

<form>

javascript

onsubmit