ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ช่วยดูโค้ดการใช้ฟังก์ชัน .keyup() ของ jquery ที่สร้างไว้อีกไฟล์ทีครับ  (อ่าน 3367 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
fogza
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« เมื่อ: 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() มันไม่ทำงานครับ ต้องแก้ยังไงครับ ผมเพิ่มเคยเขียนแบบแยกไฟล์ ปรกติเขียนแต่อยู่ในไฟล์เดียวกัน  Tongue
รบกวนด้วยนะครับ  wanwan017
บันทึกการเข้า
:: สังคมจะดีได้ อยู่ที่เราทุกคน ไม่ใช่แค่ใครคนใดคนหนึ่ง ::
aunkanbin
สมุนแก๊งเสียว
*

พลังน้ำใจ: 226
ออฟไลน์ ออฟไลน์

กระทู้: 538



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 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
บันทึกการเข้า
ยิ่งสูงยิ่งหนาว
fogza
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« ตอบ #2 เมื่อ: 25 มกราคม 2012, 10:25:09 »
ขอบคุณสำหรับคำแนะนำนะครับ แต่ด้วยเวลามีจำกัด ผมเลยต้องข้าม javascript ไปนะครับ  Tongue

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

ผมจะเขียนหลายฟังก์ชันด้วยนะครับเลยประกาศแบบนี้
function submitform(){......}
รบกวนด้วยครับ ขอบคุณครับ  wanwan017
บันทึกการเข้า
:: สังคมจะดีได้ อยู่ที่เราทุกคน ไม่ใช่แค่ใครคนใดคนหนึ่ง ::
aunkanbin
สมุนแก๊งเสียว
*

พลังน้ำใจ: 226
ออฟไลน์ ออฟไลน์

กระทู้: 538



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 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
บันทึกการเข้า
ยิ่งสูงยิ่งหนาว
TonHaDy
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 75
ออฟไลน์ ออฟไลน์

กระทู้: 1,134



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 25 มกราคม 2012, 13:17:13 »
username.keyup(function(event){
event  เอาออก หรือถ้าจะให้ใช้ js ล้วน pervent default ด้วย
เชคดูว่า js ทำงานได้จริงหรือยัง
ยังไม่ได้อีกใช้ live
บันทึกการเข้า
hadyshop
เสื้อผ้าแฟชั่น, เสื้อผ้าแฟชั่นเกาหลี ทั้งพร้อมส่ง และพรีออเดอร์
เสื้อผ้าแฟชั่นพร้อมส่ง สไตล์เกาหลี ราคาถูก
jackiller
คนรักเสียว
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 149



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 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>
« แก้ไขครั้งสุดท้าย: 25 มกราคม 2012, 13:39:33 โดย jackiller » บันทึกการเข้า
รักษ์โลก ลดโลกร้อน | ข้าวไรซ์เบอร์รี่ กิจของชาวนา | สติ๊กเกอร์ติดรถ ร้านภูดิท
fogza
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« ตอบ #6 เมื่อ: 25 มกราคม 2012, 16:37:13 »
อ้างจาก: aunkanbin ที่ 25 มกราคม 2012, 12:30:15
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

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

อ้างจาก: 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
คนรักเสียว
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 149



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 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
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 75
ออฟไลน์ ออฟไลน์

กระทู้: 1,134



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 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
บันทึกการเข้า
hadyshop
เสื้อผ้าแฟชั่น, เสื้อผ้าแฟชั่นเกาหลี ทั้งพร้อมส่ง และพรีออเดอร์
เสื้อผ้าแฟชั่นพร้อมส่ง สไตล์เกาหลี ราคาถูก
fogza
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« ตอบ #9 เมื่อ: 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 ขอบคุณมากครับ ทำได้แล้ววว  Cry
แต่ผมประกาศแบบนี้แทน ได้เหมือนกัน $(document).ready(function() {..}); ว่าแต่อันไหนดีกว่ากันน้อ..

อ้างจาก: TonHaDy ที่ 26 มกราคม 2012, 13:19:37
อ่อ โทดที ผมดูไม่ดีเอง
คุณ submit ไปแล้ว มันก็เลย keyup ไม่ได้ (มันได้ แต่ได้รอบเดียว มันก็เลย เช็คค่าว่างได้)
ให้เอา keyup ออกจาก submit
ขอบคุณมากๆ ครับ

ขอบคุณทุกท่านครับ ไว้มีปัญหาจะแวะมาถามใหม่นะครับ ช่วงนี้กำลังเร่งโปรเจคเลยครับ  wanwan017 wanwan003
« แก้ไขครั้งสุดท้าย: 27 มกราคม 2012, 00:50:26 โดย fogza » บันทึกการเข้า
:: สังคมจะดีได้ อยู่ที่เราทุกคน ไม่ใช่แค่ใครคนใดคนหนึ่ง ::
TonHaDy
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 75
ออฟไลน์ ออฟไลน์

กระทู้: 1,134



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 27 มกราคม 2012, 20:17:28 »
ใส่แบบนี้ก่ได้ครบสั้นๆ

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

; นี้ใส่ไม่ใส่ก็ได้ แต่ผมชอบใส่
บันทึกการเข้า
hadyshop
เสื้อผ้าแฟชั่น, เสื้อผ้าแฟชั่นเกาหลี ทั้งพร้อมส่ง และพรีออเดอร์
เสื้อผ้าแฟชั่นพร้อมส่ง สไตล์เกาหลี ราคาถูก
fogza
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« ตอบ #11 เมื่อ: 28 มกราคม 2012, 01:34:05 »
อ้างจาก: TonHaDy ที่ 27 มกราคม 2012, 20:17:28
ใส่แบบนี้ก่ได้ครบสั้นๆ

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

; นี้ใส่ไม่ใส่ก็ได้ แต่ผมชอบใส่
โอ้วว สั้นๆ ได้ใจความ
ขอบคุณอีกครั้งครับ  Cry
บันทึกการเข้า
:: สังคมจะดีได้ อยู่ที่เราทุกคน ไม่ใช่แค่ใครคนใดคนหนึ่ง ::
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: