0

我有这个简单的形式：

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

3 回答 3

0

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

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 是您可以用来将变量巧妙地传递给函数的选项之一。

于 2013-01-18T18:08:10.000 回答
0

如果您不想将表单值发送到任何地方，那么您只需type="submit"要从按钮中删除即可。

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

$("#create").click(doSomething);
于 2013-01-18T18:13:46.843 回答
0

type="submit"和type="button"我没有意识到的区别。
此外，buttonandsubmit类型对onclickandonsubmit事件的反应也不同。

例如

<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;
   ... 
 }
于 2013-01-18T18:58:13.103 回答