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，return false只有在填写了这些字段时才会起作用（并且您的表单会让您知道所需的字段）。

要阻止提交/刷新（因为我只使用用户输入填充DOM），在表单头添加<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; ... }然后

{{1}}

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

3 个答案: