Web_Design 板


LINE

※ 引述《revo3512 (brands)》之銘言: : 版上各位前輩們好: : http://codepen.io/anon/pen/GWKoZW (code在此) : 爬文說location.assign可以指定....在按完按鈕後到連接到指定page, 但發現好像不是 : 每個網站都可以顯示出來(至少在codepen中,連w3c可以,連yahoo、google會空白) : →如果想要按下 "加入會員" 先判定表格是否有填寫好,ture 直接連到google首頁, : fause 則是停留在原本表單畫面,該怎麼寫呢? : 先謝謝大家>"< 有關表單的部分,不建議直接用js導向其他頁面 表單正常的用法是在form標籤裡面寫上要前往的後端程式網址, 後端程式利用http post傳來的資料,接收變數後做處理(通常是寫入資料庫) form標籤的用法可以參考w3c https://www.w3schools.com/tags/att_form_action.asp html第6行的<form>應該改成類似這樣,在action內填寫要連去的網址 <form action="/action_page.php" method="post"> 另外,html表單要傳送的話,有一個type="submit"可以使用, 預設的圖形是按鈕,按下去就會把表單送到action的網址 input要改成以下這種方式較好 <input type="submit" value="加入會員"> 你可能會發現input裡面的onclick="Send()"不見了,因為不建議放那邊 單純在input的按鈕上加onclick無法完全偵測到表單送出的事件 例如鍵盤的使用者,可以透過鍵盤的enter鍵直接觸發送出表單, 又或是單純用鍵盤的tab切換欄位,最後再用enter去按加入會員的按鈕, 以上兩者都可以迴避input onclick事件 建議參考w3c的用法,把驗證的js放在form標籤上 https://www.w3schools.com/js/js_validation.asp <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> 至於判斷表單有沒有填好,如果只是要檢查必填欄位或是長度什麼的, 不用自己寫,可以直接套用老牌的jQuery Validation Plugin 詳細內容可以參考這篇台大計中的教學 http://www.cc.ntu.edu.tw/chinese/epaper/0033/20150620_3307.html 最後的最後,除了前端靠js擋以外,後端也要驗證資料 前端驗證防君子,後端驗證防小人,不然很容易就被injection類的攻擊打爆了 --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.187.98.220
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1487760640.A.0AA.html
1F:推 Piedastar: 推 02/22 20:46
2F:推 revo3512: 謝謝nottt大! 會這樣寫是因為這個page是串google excel 02/23 09:15
3F:→ revo3512: 填寫的資料會傳送到google excel 自動填入,這部分也是 02/23 09:16
4F:→ revo3512: 可以這樣寫嗎? 02/23 09:16
5F:→ revo3512: 我是參考此篇:https://goo.gl/DgHZjk 02/23 09:18
6F:→ revo3512: 在google apps script建立好一個自動傳值到excel的程式 02/23 09:18
7F:→ revo3512: 在html上寫上form跟input後送出,會把資料送到excel中 02/23 09:19
8F:→ revo3512: 本來的做法是...送出後會出現 result=true 02/23 09:20
9F:→ revo3512: 但我想改的是送出時驗證欄位是否有填寫,送出後直接跳轉 02/23 09:20
10F:→ revo3512: google首頁~ 02/23 09:20







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Boy-Girl站內搜尋

TOP