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

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>

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>

來源

2013-01-18 user1460015

首先你需要更新你的函數聲明能夠接收要發送

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-18 18:08:10

此答案由系統爲低質量，因爲**長**和** **內容標記。更好的答案可以解釋避開OP的代碼的關鍵方面。 –

@EricJ。感謝您的建議，我只是這樣做，因爲OP幾乎在那裏，所以我認爲OP只需要最後的推動。不過，我會根據您的建議更新它以解釋答案。 –

如果你不想在任何地方發送表單值，那麼你只需要從你的按鈕中刪除type="submit"。

你的示例代碼工作正常。我不確定你的意思是「更好」的方式。更現代/慣用的javascript不會使用onclick屬性，而是將doSomething綁定到按鈕。使用jQuery，這將是這樣的：

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

來源

2013-01-18 18:13:46

var create = getElementById（「create」）; create.addEventListener（「onclick」，doSomething，false）這是你綁定的意思嗎？ – user1460015

還有就是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; 
    ... 
}

來源

2013-01-18 18:58:13 user1460015

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

回答

相關問題