HTML以Javascript處理表單

 

寫法1.把js處理函數名稱寫在html中

缺點, 如果你的框架是template view分離就會很難控制

<form onsubmit="submitHandler(event);">

<label for="normal_text">一般文字欄位</label>

<input id="normal_text" type="text" name="my-text" value="12345" />

<button type="submit">傳送</button>

</form>

<script>

function submitHandler(e){

console.log('收到的事件',e);

e.preventDefault(); //避免HTML的預設傳送行為發生

console.log('傳送表單的處理往下寫');

}

</script>

寫法2.給定id

缺點 id 需要寫死,處理函數無法直接套用在不同的html網頁中(你如果id都寫一樣當然沒問題)

<form id="my-form">

<label for="normal_text">一般文字欄位</label>

<input id="normal_text" type="text" name="my-text" value="12345" />

<button type="submit">傳送</button>

</form>

<script>

document.getElementById('my-form').addEventListener('submit',(e)=>{

console.log('收到的事件',e);

e.preventDefault(); //避免HTML的預設傳送表單的行為發生

console.log('傳送表單的處理往下寫');

})

</script>

寫法3.