如何从表单获取值并防止提交？

Question

我有这个简单的形式：

的HTML

<form>
    <label for="eName">Name</label>
    <input id="eName" type="text" name="eName">
    <label for="Email">Email</label>
    <input id="Email" type="text"  name="Email">
    <button id="create" class="boton" 
        onclick="doSomething();" type="submit">Create!</button>
</form>

JS

function doSomething() {
    var name, email;
    name = document.getElementById("eName").value;
    email = document.getElementById("Email").value;
    putElementsIntoTheDOM(name, email);
}

当用户输入一些信息时，我想用用户输入来填充DOM。 上面的示例有效。 但我认为可以做得更好。 我就是不知道

如何连接<button>以便当用户单击它时将表单值传递给函数doSomething() ？

另外，由于除了填充DOM外，我不会在其他任何地方发送表单值，因此如何防止提交？

我已经看到过类似的内容，但是我无法正常工作。

<button id="create" class="boton" onclick="doSomething(this.form);"     
    type="submit">Create!</button>

Answer 1

首先，您必须更新函数声明以能够接收要发送的变量

function doSomething(name,email) {
}

其次，如果必须将某些字段的值发送到该函数，则可以像这样单击按钮。

<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>

但是，建议使用不引人注意的javascript，为此，jQuery是可用于将变量整洁地传递给函数的选项之一。

Answer 2

如果您不想在任何地方发送表单值，则只需从按钮中删除type="submit" 。

您的示例代码可以正常工作。 我不确定“更好”的意思。 更现代/更惯用的javascript不会使用onclick属性，而是将doSomething绑定到按钮。 使用jQuery，它看起来像：

$("#create").click(doSomething);

Answer 3

我没有意识到type="submit"和type="button"之间的区别。
同样， button和submit类型对onclick和onsubmit事件的反应也不同。

例如

<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text"  name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>

请注意， form顶部是onclick 。
只要您专注于输入元素，当然也可以单击按钮，就会触发onclick 。

将表单更改为<form onsubmit="doSomething();但不更改type="button"不会执行任何操作。单击按钮不会触发该函数。

通过更改type="submit"并保持头部<form onsubmit="doSomething();在单击按钮时触发该函数。一个很好的附加功能是，如果您有任何<input ... required="required">的submit如果这些字段是在充满（和你的表格将让您了解所需的字段）才有效。

为了防止提交/刷新（因为我只用用户输入填充DOM），在表单头添加return false可以防止提交
<form onsubmit="doSomething(); return false"> 。

最后，要获得添加this的表单值：
<form onsubmit="doSomething(this); return false> ，然后

function doSommething(formInfo) {
   var name = formInfo.eName.value;
   var email = formInfo.Email.value;
   ... 
 }