[問題] 阻止 form 提交?

看板Web_Design作者 (項為之強)時間8年前 (2016/09/12 23:48), 8年前編輯推噓8(8010)
留言18則, 8人參與, 最新討論串1/1
想用 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 提交的效果。 -- 不要哭。要知道值得你哭的人,不會讓你哭。 別騙人。因為會被你騙的,都是相信你的人。 不要去追。人家神隱,就是不想看見你。 不用和事。當事人吵架,就是想戰。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.165.150 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1473695320.A.D00.html

09/12 23:57, , 1F
onsubmit裡preventDefault & return false ?
09/12 23:57, 1F

09/13 03:54, , 2F
preventDefault
09/13 03:54, 2F

09/13 03:56, , 3F
其實input不一定一定要在form裡面,要用ajax提交資料,
09/13 03:56, 3F

09/13 03:56, , 4F
也不一定要用form包起來
09/13 03:56, 4F

09/13 09:22, , 5F
其實那不是對一個id提交,而是本來html中網址沒有寫完整的
09/13 09:22, 5F

09/13 09:29, , 6F
時候,都會用現有網頁的網址補完
09/13 09:29, 6F

09/13 11:10, , 7F
return false就不會提交了
09/13 11:10, 7F

09/13 11:12, , 8F
我覺得用form的好處是可以直接用serialize
09/13 11:12, 8F

09/13 12:00, , 9F
form本身沒有serialize吧 還是你是說jquery的serialize?
09/13 12:00, 9F

09/13 12:13, , 10F
可以把原本的submit button type設為button 偵測click e
09/13 12:13, 10F

09/13 12:13, , 11F
vent 然後再自己用js處理
09/13 12:13, 11F

09/13 15:20, , 12F
樓上正解
09/13 15:20, 12F
因為如果在 form 裡按了 Enter , 不少瀏覽器會『自動提交』。 ※ 編輯: Gold740716 (140.116.165.150), 09/13/2016 21:36:18

09/14 02:33, , 13F
阻止enter提交可以在input 設 onkeypress = "return eve
09/14 02:33, 13F

09/14 02:33, , 14F
nt.keycode != 13;"
09/14 02:33, 14F

09/14 03:12, , 15F
前兩樓不是都說了就是在onsubmit裡面做,不管是用什麼方法
09/14 03:12, 15F

09/14 03:13, , 16F
提交包括button、enter、script submit都會截取到啊..
09/14 03:13, 16F

09/14 03:13, , 17F
有必要再找別的方法?
09/14 03:13, 17F

09/14 07:38, , 18F
一樓正解啊
09/14 07:38, 18F
文章代碼(AID): #1NrivOq0 (Web_Design)
文章代碼(AID): #1NrivOq0 (Web_Design)