如何從表單獲取值並防止提交？

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;
   ... 
 }