Re: [問題] js 更改按鈕執行的判斷結果

看板Web_Design作者nottt (無)時間8年前 (2017/02/24 00:25)推噓1(1推 0噓 5→)

留言6則, 1人參與討論串3/3 (看更多)

→ 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