iT邦幫忙

0

更改按鈕執行的判斷結果

brands 2017-02-22 16:00:1912067 瀏覽

http://codepen.io/anon/pen/GWKoZW (code在此)


測試發現 input裡面加了required="",想讓某些欄位設定成必填,想說按下送出前,會提醒必填欄位空白的地方未填寫,但發現表單什麼都沒填,按下按鈕就會送出了.....excel也確定會自己生出一筆未定義的資料...

excel連結 https://docs.google.com/spreadsheets/d/12Hx73MOTDhCheDhG8xsU0kU6N03wLCWg4eym-1GnokU/edit?usp=sharing

爬文說location.assign可以指定....在按完按鈕後到連接到指定page, 但發現好像不是每個網站都可以顯示出來(至少在codepen中,連w3c可以,連yahoo、google會空白)

→如果想要按下 "加入會員" 先判定表格是否有填寫好,ture 直接連到google首頁,fause 則是停留在原本表單畫面,該怎麼寫呢?


input type"reset",雖然有放入,但好像沒什麼反應,,欄位上有填寫資料,按下重新填寫按鈕,資料還在欄位上。是漏掉什麼了嗎? w3c範例直接這樣設定就ok,但我的卻沒反應 T^T


2017/02/22 16:45 update
謝謝魷魚,required=""與reset的部分已經解決了!!! 因為自己的粗心沒注意到小細節。
就剩下js跳轉往頁的部分了QQ

2017/02/22 17:02 update
有的!!! 謝謝海綿寶寶~ required 跟reset KO它們了!!! (Y)

魷魚 iT邦新手 1 級 ‧ 2017-02-22 16:35:17 檢舉
沒學過js,但看得懂一點html@@"
<input type="button" value="加入會員" onclick="Send()">
改成type="submit",就會驗證了
魷魚 iT邦新手 1 級 ‧ 2017-02-22 16:39:44 檢舉
如果是用js的話,應該在js裡面驗證@@"
可以參考看看這篇,看有沒有幫助=ˇ=
http://www.programmer-club.com.tw/ShowSameTitleN/javascript/8875.html
pratnket iT邦新手 5 級 ‧ 2017-02-22 20:06:26 檢舉
下方寫的API
根據 你要的狀況
數值判斷 儲存Cookie
讀取網頁
應該夠用了...
大概吧...?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
海綿寶寶
iT邦大神 1 級 ‧ 2017-02-22 16:53:07

一次一個問題
W3c有 required 的範例可以參考

1
pratnket
iT邦新手 5 級 ‧ 2017-02-22 19:19:23

作者:pratnket
版本:2017_Var3

JS頁
---###變數說明###---
Home 預設頁面
Cookie 預設cookie名稱

---###方法說明###---

修改設定值
	Redirect.config({
		Home:"index.php",
		Cookie:"Href_Url"
	});

儲存 Cookie
	Redirect.cookie_Save("index.php"); 
	Redirect.cookie_Save("pratnket","index.php"); 

讀取 Cookie
	Redirect.cookie_Load("URL");
	
alert訊息
	Redirect.msg("跳轉插件"); 

讀取 Cookie
	Redirect.load("URL"); 
跳轉網址
	Redirect.JumpURL();
	Redirect.config("").JumpURL();
	Redirect.config({}).msg("").JumpURL();
	

---###使用範例###---

修改預設變數範例
Redirect.config({
	Home:"index.php",
	Cookie:"Href_Url"
});

Redirect.save( "http://ithelp.ithome.com.tw/" );
Redirect.msg( "預設變數URL: " + Redirect.load("URL") );
Redirect.msg( "預設變數Href_Url: " + Redirect.load("Href_Url") );
Redirect.msg( "跳轉前可輸入訊息").JumpURL(Redirect.load("Href_Url") );

複製程式碼

<script>	
(function () {
	//預設值
	var options = {
		Home: 'index.php',
		Cookie: 'URL',
	}

	//API
	var api = {
		//修改預設值
		config: function (opts) {
			if(!opts) return options;
			for(var key in opts) {
				options[key] = opts[key];
			}
			return this;
		},
		
		//保存網址(COOKIE變數)
		msg: function (message) {
			if (typeof message === 'string') {
				alert(message);
			}
			return this;
		},
		
		//保存網址(COOKIE變數)
		cookie_Save: function () {	
			if (typeof arguments[0] === 'string') {
				if(arguments.length == 1)
					document.cookie = options.Cookie + "=" + arguments[0];
				if(arguments.length == 2)
					document.cookie = arguments[0] + "=" + arguments[1];
			}
			return this;
		},
		//讀取網址(COOKIE變數)
		cookie_Load: function (name) {
			var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
			 if(arr != null) 
				return unescape(arr[2]); 
		},
				
		//跳轉頁面
		//只可輸入字串
		JumpURL: function JumpURL(TargetPage) {
			//無輸入字串
			if (TargetPage == null) {
				//跳轉預設值頁面
				window.location = options.Home;
			}
			//輸入的變數 型態與數值 必需是 字串
			if (typeof TargetPage === 'string') {
				//返回上頁
				if (TargetPage == "back" || TargetPage == "return"){ 
					//歷史紀錄 大於 1
					if (history.length > 1){
						history.back(-1)
					}else{
						//返回預設值頁面
						window.location = options.Home ;
					}
				}
				//關閉【視窗】
				if (TargetPage == "close"){
					window.close();
				}
				//重新整理頁面
				if (TargetPage == "reflash" || TargetPage == "reload") {
					location.reload();
				}
				
				//跳轉指定頁面
				window.location = TargetPage;

			}
				
			return this;
		}

		
	}
	this.Redirect = api;
})();
</script>

使用頁

<script src="Redirect.js"></script>
<script>
Redirect.msg( "跳轉前可輸入訊息").JumpURL(Redirect.load("Href_Url") );
Redirect.msg( "跳轉前可輸入訊息").JumpURL("https://www.google.com.tw/");
</script>
pratnket iT邦新手 5 級 ‧ 2017-02-23 01:32:15 檢舉

使用頁

數值1: <input id="fname" type="text" value="Mickey" required=""/>
數值2: <input id="lname" type="text" value="Mouse" required="" />
數值3: <input id="lname2" type="text" value="Mouse" required="" />
數值4: <input id="lname3" type="text" value="Mouse" required="" />

<input id="sub" type="button" value="Submit" onclick="Verificat.Form()" />

JS頁
表單驗證

(function () {
	//預設值
	var options = {
		Form: 'Form',
		Placeholder: '請填寫入數值',
		Style: 'background-color:powderblue',
		Msg: '你尚有內容未填寫',
	}

	//API
	var api = {
		//修改預設值
		config: function (opts) {
			if(!opts) return options;
			for(var key in opts) {
				options[key] = opts[key];
			}
			return this;
		},
		
		//只可輸入字串
		Form: function Form() {
			var x = document.getElementById("Form");
			for (var i=0 ; i < x.length ; i++){							  
				if(x.elements[i].required){
					if (x.elements[i].value==null || x.elements[i].value=="")
					{
						x.elements[i].style = options.Style;
						x.elements[i].placeholder = options.Placeholder;
						content = true;
					}	
				}
			}
			if(content) alert(options.Msg);
				
			return this;
		}

		
	}
	this.Verificat = api;
})();

我要發表回答

立即登入回答