[問題] 阻止 form 提交?

作者: Gold740716 (項為之強)   2016-09-12 23:48:31
想用 js 處理輸入輸出,
做一個像表單的東西。
但其實不實際用 form 的提交功能,
只用 js 處理後回應,
或 ajax 向 server 發 request 回應。
如果用 form 標籤,
就會向 action="url" 的 url 發出請求,刷新頁面。
但我不想要刷新,
想要留在同一個頁面。
剛查到一個技巧是把 action="#formSubmit" ,
提交到一個 id ,(甚至也可以是不存在的 id 。)
然後用 hashChange 來偵測。
但這樣會不會有什麼問題?
因為從網址來看應該還是要發出如下請求:
GET http://domain.name/path/file.html#formSubmit?a=true&b=false
只是因為瀏覽器的實作上,
連到同一個頁面不同 id 不會重新請求。
而且 *提交到一個 id* 也太詭異了 = =|||
要用 post 還是 get ?
## 無關緊要 ###########################
另外我覺得要用 form 有二理由。
1. 語意化,這就是個表單,就該用 form 包起來。
而且不在 form 裡的 input 不會很奇怪嗎?
2. 這不是那麼重要了。
當初我想偵測 enter 輸入,又不想用 keyboard event 。
後來想到用 form 按 enter 會預設提交,
但提交又會刷新,不太好。
後來是把 input 改成 textarea ,
偵測最後一個字元。
達到類似 enter 提交的效果。
作者: Ayukawayen (亞布里艾爾發芽>//<)   2016-09-12 23:57:00
onsubmit裡preventDefault & return false ?
作者: red0whale (red whale)   2016-09-13 03:54:00
preventDefault其實input不一定一定要在form裡面,要用ajax提交資料,也不一定要用form包起來
作者: ssccg (23)   2016-09-13 09:22:00
其實那不是對一個id提交,而是本來html中網址沒有寫完整的時候,都會用現有網頁的網址補完
作者: crossdunk (推噓自如)   2016-09-13 11:10:00
return false就不會提交了我覺得用form的好處是可以直接用serialize
作者: bbcust (bbcust)   2016-09-13 12:00:00
form本身沒有serialize吧 還是你是說jquery的serialize?
作者: tsao1211 (Sunday)   2016-09-13 12:13:00
可以把原本的submit button type設為button 偵測click event 然後再自己用js處理
作者: devil115789 (味噌湯好喝)   2016-09-13 15:20:00
樓上正解
作者: tsao1211 (Sunday)   2016-09-14 02:33:00
阻止enter提交可以在input 設 onkeypress = "return event.keycode != 13;"
作者: ssccg (23)   2016-09-14 03:12:00
前兩樓不是都說了就是在onsubmit裡面做,不管是用什麼方法提交包括button、enter、script submit都會截取到啊..有必要再找別的方法?
作者: osk2 (.)(.)   2016-09-14 07:38:00
一樓正解啊

Links booklink

Contact Us: admin [ a t ] ucptt.com