ช่วยดูโค้ดการใช้ฟังก์ชัน .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() มันไม่ทำงานครับ ต้องแก้ยังไงครับ ผมเพิ่มเคยเขียนแบบแยกไฟล์ ปรกติเขียนแต่อยู่ในไฟล์เดียวกัน

รบกวนด้วยนะครับ

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 จะเข้าใจง่ายขึ้นและไปเร็วมากครับ

fogza · 25 มกราคม 2012, 10:25:09

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

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

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

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 แล้ว

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

javascript ขั้นเทพ
*goragod.com

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

jquery
*ninenik.com
*thaicreate.com

TonHaDy · 25 มกราคม 2012, 13:17:13

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

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>

fogza · 25 มกราคม 2012, 16:37:13

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

javascript ขั้นเทพ
*goragod.com

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

jquery
*ninenik.com
*thaicreate.com

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

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

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

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

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() {
 บลา ๆ ๆ
});

TonHaDy · 26 มกราคม 2012, 13:19:37

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

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

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

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

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

TonHaDy · 27 มกราคม 2012, 20:17:28

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

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

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

fogza · 28 มกราคม 2012, 01:34:05

อ้างถึงจาก: TonHaDy ใน 27 มกราคม 2012, 20:17:28
ใส่แบบนี้ก่ได้ครบสั้นๆ

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

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

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