iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

JavaScript 從零開始系列 第 40

JavaScript 從零開始 - Day40 - 取得與清除 input 的值

clean

Submit

許多網站都有表單要填寫,寫完後按下送出就會將資料送到後台資料庫,在 W3School 有介紹這個寫法,

<label for="name">
  <span>Name:</span>
  <input type="text" id="name" placeholder="your name" />
  <input type="submit" value="submit" />
  <button type="submit">Submit</button>
</label>

可以看到有 inputbutton 兩種,並且都有 type="submit" 的方法可以使用,至於 inputbutton 差別在哪裡,可以看這篇文章

簡單來說,為了避免使用者不小心將資料直接就送到後台,可以使用 button 來設計,如果是沒有疑慮的表單內容,可以使用 input 方式來設計。

我自己是常用 button 來做設計,因為可以按照需求與功能進行。

Reset

有送出表單內容,當然也有清空表單內容,而 W3School 也有提供範本寫法,

<label for="email">
    <span>Email</span>
    <input type="email" name="email" id="email" placeholder="your email">
    <input type="reset" value="reset">
    <button type="reset">Reset</button>
  </label>

上方的兩個寫法,記得要用 form 標籤,因為 input 本身是 form 的元素,要包住才會有效果!

透過 JS 取得值與清空 input 內容

本文重點,透過 JS 取得 input 輸入的值跟清空該怎麼寫? 直接看程式碼,

HTML

<form>
  <label for="testInput">
    <span>TEXT: </span>
    <input type="text" placeholder="test" id="testInput" />
    <button class="submitBtn">SUBMIT</button>
    <button type="reset">RESET</button>
  </label>
</form>

Javascript

var testInput = document.getElementById("testInput");
var submitBtn = document.querySelector(".submitBtn");

function FsubmitBtn(value) {
  var str = "";
  var submitValue = testInput.value;
  str = submitValue;
  alert(str);
}
submitBtn.addEventListener("click", FsubmitBtn);

說明:

  1. 綁定 input 表格與 button 按鈕。
  2. 寫一個 function 給監聽事件用。
  3. 先宣告一個字串變數為空值。
  4. 在宣告變數是 input 所得到的值。
  5. 字串變數為 input 的值。
  6. 執行 function 會跳出 alert 視窗,並顯示輸入的值。
  7. button type="reset"form 標籤內,會自動執行清空 input 的功能。

CodePen https://codepen.io/hnzxewqw/pen/YzyRxVy


參考資料

[Guide] 用 JavaScript 來取得表單元素內容的值(取值)

HTML <button> type Attribute


上一篇
JavaScript - 從零開始 - Day39 - 點選清單項目時,刪除清單資料
系列文
JavaScript 從零開始40

尚未有邦友留言

立即登入留言