พิมพ์หน้านี้ - ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ

หัวข้อ: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 25 มกราคม 2012, 02:47:00

testform.php

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/submitform.js"></script>
</head>

<body>
<form action="" method="post" onsubmit="submitform()">
	<input type="text" name="username" /><input type="submit" value="ตกลง" />
</form>
</body>

</html>

submitform.js

โค๊ด:

function submitform(){
	var username = $('input[name=username]');
	
      $(username).keyup(function(){		
			alert('xxxx');
                        return false;
	});
		if(username.val() == ""){
			alert(" กรุณากรอกข้อมูล ");
			return false;
		}
}

โค้ดที่เช็คค่าว่างของทำงานครับ แต่ถ้าเป็นโค้ดที่เช็คแบบ auto เหมือนที่ผมใช้ .keyup() มันไม่ทำงานครับ ต้องแก้ยังไงครับ ผมเพิ่มเคยเขียนแบบแยกไฟล์ ปรกติเขียนแต่อยู่ในไฟล์เดียวกัน :P
รบกวนด้วยนะครับ :wanwan017:

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: aunkanbin ที่ 25 มกราคม 2012, 03:54:12

testform.php

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="submitform.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username"/><input type="submit" value="ตกลง" />
</form>
</body>
</html>

submitform.js

โค๊ด:

$(function(){
	var username = $("#username");
		username.keyup(function(event){
		if(username.val() == ""){
			alert("กรุณากรอกข้อมูลครับ");
			return false;
		}
		else{
			alert(username.val());
			return true;
		}
});
	});

ศึกษาพื้นฐาน javascript ก่อนครับ
แล้วค่อยจับ javascript framework จะเข้าใจง่ายขึ้นและไปเร็วมากครับ
:wanwan003:

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 25 มกราคม 2012, 10:25:09

ขอบคุณสำหรับคำแนะนำนะครับ แต่ด้วยเวลามีจำกัด ผมเลยต้องข้าม javascript ไปนะครับ :P

โค้ดที่เขียนให้มา มันยังนิ่งอยู่ครับ คือผมอยากจะให้มันทำงานประมาณนี้ครับ
1. เวลาที่พิมพ์ข้อความใน username ให้ alert('xxxx');
2. เวลากดปุ่ม 'ตกลง' ถ้าไม่มีข้อความในช่องกรอก username ให้ alert('กรุณากรอกข้อมูล');

ผมจะเขียนหลายฟังก์ชันด้วยนะครับเลยประกาศแบบนี้
function submitform(){......}
รบกวนด้วยครับ ขอบคุณครับ :wanwan017:

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: aunkanbin ที่ 25 มกราคม 2012, 12:30:15

testform.php

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="submitform.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username"/><input type="submit" value="ตกลง" onclick="submitform();"/>
</form>
</body>
</html>

submitform.js

โค๊ด:

$(function(){
	var username = $("#username");
		username.keyup(function(event){
		if(username.val() !==""){
			alert(username.val());
			return true;
		}
		else{
			return false;
		}
});
	});
function submitform(){
var username = $("#username");
if(username.val() ==""){
alert("กรุณากรอกข้อมูล");
			return false;
}
		else{
			return true;
		}
}

script นี้ใช้ได้นะครับ Test แล้ว :wanwan044:
event keyup อยู่ดีๆเรียกใช้แบบ function ไม่ได้นะครับ ทำได้ยุ่งยากครับ
javascript เป็นการเขียน script แบบลำดับเหตุการครับ
่jquery สามารถเข้าถึง selector โดยไม่ต้องใส่ onclick ใน input ได้ครับที่เขียนมาแบบนี้เพราะต้องการ
ส่วนใหญ่การเขียน function เสริมจะใช้กับ element ทีถูกเรียกมาโดย Ajax ครับ
javascript คนละเรื่องกับ php เลยนะครับ
เว็บที่แนาะนำ
:wanwan021:
javascript ขั้นเทพ
*goragod.com

javascript พื้นฐาน
*thaicreate.com

jquery
*ninenik.com
*thaicreate.com

:wanwan019:

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: TonHaDy ที่ 25 มกราคม 2012, 13:17:13

username.keyup(function(event){
event เอาออก หรือถ้าจะให้ใช้ js ล้วน pervent default ด้วย
เชคดูว่า js ทำงานได้จริงหรือยัง
ยังไม่ได้อีกใช้ live

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: jackiller ที่ 25 มกราคม 2012, 13:38:15

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery().ready(function() {
		jQuery("#username").keyup(function() {
				//blockUI();
				var cal = jQuery("#username").val();
				if (cal == "") {
				alert("ค่าว่างไม่ได้นะจ๊ะ");	
				} else { 
				alert("ต้องแบบนี้สิ น่ารักที่สวด");	
				}
		});
});

</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username"/><input type="submit" value="ตกลง" />
</form>
</body>
</html>

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 25 มกราคม 2012, 16:37:13

อ้างจาก: aunkanbin ที่ 25 มกราคม 2012, 12:30:15

ขอบคุณนะครับ เว็บเหล่านี้ผมเข้าเป็นประจำครับ ^^ คือถ้าเขียนโค้ดไว้หน้าเดียวกันผมเขียนได้ครับ แต่ว่าถ้าหากจะเขียนหลายๆ ฟังก์ชันนะครับ กลัวว่าในหน้านั้นจะยาวเหยียด ยุ่งยากตอนที่จะแก้ไขปรับปรุงนะครับ
ถ้าเขียน .keyup() ไว้ไฟล์เดียวกัน แต่เวลา submit form ค่อยเรียกใช้ฟังก์ชันที่เขียนไว้อีกไฟล์อย่างนี้พอได้ไหมครับ :wanwan044:

อ้างจาก: TonHaDy ที่ 25 มกราคม 2012, 13:17:13

pervent default คืออะไรเอ่ย รบกวนขยายความอีกนิดนะครับ

อ้างจาก: jackiller ที่ 25 มกราคม 2012, 13:38:15

ถ้าเขียนอยู่ในไฟล์เดียวกันมันก็ได้ แต่อยากจะเขียนแยกนะครับ ถ้างั้น .keyup() เอาไว้ไฟล์เดียวกัน ที่เหลือก็แยกไฟล์จะดีไหม๋ครับ

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: jackiller ที่ 26 มกราคม 2012, 11:36:43

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username"/><input type="submit" value="ตกลง" />
</form>
</body>
</html>

file scripts.js

โค๊ด:

/*--- จะใส่ฟังชันด์ไรก็ได้เรื่อยๆ ไม่อั้น ---*/
jQuery().ready(function() {
		jQuery("#username").keyup(function() {
				//blockUI();
				var cal = jQuery("#username").val();
				if (cal == "") {
				alert("ค่าว่างไม่ได้นะจ๊ะ");	
				} else { 
				alert("ต้องแบบนี้สิ น่ารักที่สวด");	
				}
		});
});

/*--- จะใส่ฟังชันด์ไรก็ได้เรื่อยๆ ไม่อั้น ---*/
jQuery().ready(function() {
 บลา ๆ ๆ
});

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: TonHaDy ที่ 26 มกราคม 2012, 13:19:37

อ้างจาก: TonHaDy ที่ 25 มกราคม 2012, 13:17:13

อ่อ โทดที ผมดูไม่ดีเอง
คุณ submit ไปแล้ว มันก็เลย keyup ไม่ได้ (มันได้ แต่ได้รอบเดียว มันก็เลย เช็คค่าว่างได้)
ให้เอา keyup ออกจาก submit

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 27 มกราคม 2012, 00:48:25

อ้างจาก: jackiller ที่ 26 มกราคม 2012, 11:36:43

โค๊ด:

<html>
<head>
<title>ทดสอบการรับ-ส่งค่าจากฟอร์มไปฟังก์ชัน jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="username"/><input type="submit" value="ตกลง" />
</form>
</body>
</html>

file scripts.js

โค๊ด:

/*--- จะใส่ฟังชันด์ไรก็ได้เรื่อยๆ ไม่อั้น ---*/
jQuery().ready(function() {
		jQuery("#username").keyup(function() {
				//blockUI();
				var cal = jQuery("#username").val();
				if (cal == "") {
				alert("ค่าว่างไม่ได้นะจ๊ะ");	
				} else { 
				alert("ต้องแบบนี้สิ น่ารักที่สวด");	
				}
		});
});

/*--- จะใส่ฟังชันด์ไรก็ได้เรื่อยๆ ไม่อั้น ---*/
jQuery().ready(function() {
 บลา ๆ ๆ
});

บวก1 ขอบคุณมากครับ ทำได้แล้ววว :'(
แต่ผมประกาศแบบนี้แทน ได้เหมือนกัน $(document).ready(function() {..}); ว่าแต่อันไหนดีกว่ากันน้อ..

อ้างจาก: TonHaDy ที่ 26 มกราคม 2012, 13:19:37

ขอบคุณมากๆ ครับ

ขอบคุณทุกท่านครับ ไว้มีปัญหาจะแวะมาถามใหม่นะครับ ช่วงนี้กำลังเร่งโปรเจคเลยครับ :wanwan017: :wanwan003:

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: TonHaDy ที่ 27 มกราคม 2012, 20:17:28

ใส่แบบนี้ก่ได้ครบสั้นๆ

$(function(){
$('#').xxx(function(){
everything....
});
});

; นี้ใส่ไม่ใส่ก็ได้ แต่ผมชอบใส่

หัวข้อ: Re: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 28 มกราคม 2012, 01:34:05

อ้างจาก: TonHaDy ที่ 27 มกราคม 2012, 20:17:28

โอ้วว สั้นๆ ได้ใจความ
ขอบคุณอีกครั้งครับ :'(

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: fogza ที่ 25 มกราคม 2012, 02:47:00