Re: [問題] js 更改按鈕執行的判斷結果
→ revo3512: 在google apps script建立好一個自動傳值到excel的程式
→ revo3512: 在html上寫上form跟input後送出,會把資料送到excel中
→ revo3512: 本來的做法是...送出後會出現 result=true
→ revo3512: 但我想改的是送出時驗證欄位是否有填寫,送出後直接跳轉
→ revo3512: google首頁~
根據推文,程式流程確定了,我們先來仔細看一下這個流程資料會怎麼跑
0.建立Google apps script的程式,將資料寫入google試算表(這篇不會討論)
1.使用者填寫資料
2.驗證使用者資料是否正確,如果成功才繼續,失敗的話就回1
驗證實作方式使用jquery valid
3.資料填寫正確後,"不使用"表單傳值,改用ajax的拋資料,就是$.get()那
段
4.成功傳回google,收到回傳訊息後,把網頁跳到其他頁
如果你已經開始跟著台大計中那篇驗證的教學試著做,應該會有一段js長這樣
$("form").submit(function () {
if ($("form").valid()) {
/*驗證成功,post the form data to server*/
} else return false;
});
這邊有一點地方要調整,因為資料是走ajax傳輸,所以不管是否填寫成功,
都要中斷form的submit,不然就會被導向action的頁面,就算不填也會被導向目前頁面
就會發生ajax來不及回傳資料,先被form導回自己頁面了
因此要把上面的if條件式改成
if ($("form").valid()){
/*驗證成功,post the form data to server*/
//因為走ajax傳輸,所以在等Server回傳資料的時候,
//先把input按鈕關掉,避免使用者手癢一直按
$(':input[type="submit"]').prop('disabled', true);
//之前寫好的Send
Send();
}
return false;
很詭異沒錯,就是無論如何都要return false就對了XD
我有注意到你的html裡面的input原本就有寫了required=""
所以應該只要把valid的js一掛上去,驗證機制就啟動了
然後良心建議,$("form").valid()請不要真的寫$("form"),
乖乖的給form一個ID再去呼叫他,不然頁面裡如果有多個form就會互相干擾了
附上範例
http://codepen.io/not0000/pen/LWYboQ?editors=1010
話說也是有這篇我才知道怎麼寫入google表單,我也是長知識了
話說,這樣純前端直接寫入google表單,要怎麼做captcha的圖形驗證呢..
沒有後端檢查,感覺隨便都會被塞一堆垃圾資料,有人知道該怎麼處理嗎?
※ 引述《nottt (無)》之銘言:
: ※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1487867144.A.9C6.html
推
03/01 09:53, , 1F
03/01 09:53, 1F
→
03/01 09:54, , 2F
03/01 09:54, 2F
→
03/01 09:54, , 3F
03/01 09:54, 3F
→
03/01 09:56, , 4F
03/01 09:56, 4F
→
03/01 09:56, , 5F
03/01 09:56, 5F
→
03/01 09:56, , 6F
03/01 09:56, 6F
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 3 之 3 篇):
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章