คลังเก็บบล็อก

Ajax Jquery Tinymce Serialize


เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tinymce & Jquery serialize By Pitt Phunsanit</title>
</head>

<body>
<form id="plus" method="post" action="somepage">
  <textarea name="article" id="articleId" style="width:100%"></textarea>
  <input type="submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script> 
<script src="assets/tinymce/tiny_mce.js"></script> 
<script>
$(function(){
	$('#plus').submit(function(event){
		event.preventDefault();
		$('#articleId').val(tinyMCE.get('articleId').getContent());
		alert('after '+$('#articleId').serialize());
	});
});

tinyMCE.init({
	mode : "textareas",
	theme : "simple"
});
</script>
</body>
</html>

ส่งข้อมูลแบบ Ajax ด้วย JQuery


ถ้าสมมุติว่าฟอร์มที่ส่งข้อมูลเดิมของเราเขียน <form action="jQueryAjax.php" method="post">…</form> เราจะแปลงให้ส่งข้อมูลแบบ Ajax ได้โดย แก้เป็น

<form id="testF" method="post">…</form>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
/*เริ่มทำงานเมื่อโหลดหน้าเสร็จ*/
	$('#testF').submit(function(){
/* ทำงานเมื่อฟอร์มไอดี testF โดนซับมิต*/
		data=$('#testF').serialize()
/*ดึงค่าจากฟอร์มไอดี testF ทั้งหมด*/
		$.post('jQueryAjax.php' ,data ,function(response){
/* รูปแบบคือ $.post(ไฟล์ปลายทาง ,ข้อมูล ,ฟังก์ชั่นที่จะทำเมื่อไฟล์ปลายทางตอบกลับมา)*/
			alert(response);
		});
		return false;
	});
})
</script>

ตัวอย่าง
บันทึกเป็นไฟล์ชื่อ jQueryAjax.php

<?php
if($_POST['iusername'] != ''){
	echo 'ได้รับ ค่า iusername = '.$_POST['iusername']."\nipassword = ".$_POST['ipassword'];
	exit();
}else{
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ส่งข้อมุลแบบ post ด้วย jQuery</title>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){alert('12'); 
	$('#testF').submit(function(){
		data=$('#testF').serialize()
		$.post('jQueryAjax.php' ,data ,function(response){
			alert(response);
		});
		return false;
	});
})
</script>
</head>
<body>
<form id="testF" method="post">
  <label for="iusername">รหัสผู้ใช้</label>
  <input type="text" name="iusername">
  <br>
  <label for="ipassword">รหัสผ่าน</label>
  <input type="password" name="ipassword">
  <input type="submit" name="isubmit" value="ส่งข้อมูล">
</form>
</body>
</html>
<?php
}
%d bloggers like this: