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.







留言