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

我有一个简单的表格：

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>

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

如何连接

，以便在用户单击时传递表单值 函数

doSomething（）

此外，由于除了填充DOM之外，我不会将表单值发送到任何地方，因此如何才能 阻止提交

我见过这样的东西，但我不能让它工作太多

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

创建！

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

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是将变量整齐地传递给函数的选项之一。

如果不想将表单值发送到任何地方，则只需从按钮中删除

type=“submit”

您的示例代码运行良好。我不知道你说的“更好”是什么意思。更现代/惯用的javascript不会使用

onclick

属性，而是将doSomething绑定到按钮。使用jQuery，看起来像：

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

---

我没有意识到

type=“submit”

和

type=“button”

之间存在差异。
另外，

按钮

和

提交

类型对

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>

---

var create=getElementById（“create”）；create.addEventListener（“onclick”，doSomething，false）这就是您所说的绑定吗？由于长度和内容的原因，系统将此答案标记为低质量。一个更好的答案将解释代码中避开OP的关键方面。@EricJ。谢谢你的建议，我这么做是因为OP快到了，所以我认为OP需要最后的推动。然而，我将根据你的建议更新它来解释答案

<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>

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