สอบถามเรื่องการส่งข้อมูลจาก form แบบ ajax ไปยัง database

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่องการส่งข้อมูลจาก form แบบ ajax ไปยัง database

สอบถามเรื่องการส่งข้อมูลจาก form แบบ ajax ไปยัง database

ต้องการจะส่งข้อมูลใน form ที่รับคำกับ URL โดยใช้ ajax ไปยังฐานข้อมูล ถ้าคำที่เพิ่มใน textbox word มีคำนั้นอยู่ในฐานข้อมูลก็มี alert เด้งขึ้นมาบอกว่ามีคำนั้นอยู่แล้ว ถ้าต้องการเพิ่มคำใหม่ให้กด OK และเคลียร์ค่าในฟอร์ม ถ้าไม่ต้องการเพิ่มคำใหม่ให้กด Cancel และกลับไปหน้าแรก

Code ที่ทำแล้ว แต่ไม่ได้คะ T><T

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AddwordURL</title>
<script>

$(document).ready(function(){
	$("#submit").click(function(){
	//document.getElementById("demo").innerHTML = "Hello World";
	var word=$('#txtword').val();
	var URL=$('#URL').val();
   $.ajax({
			url: "AddWord.php",
			data: 'txtword=' +txtword + '&URL=' + URL,
			type: 'GET',
		dataType: 'html',
		success: function(data) {
			
				$('#div_show').html(data);
				
		}
				});
	});
});
</script>
</head>
<body>
<form name="form1" method="post" action="AddWord.php">  

  <table width="400" border="1" style="width: 400px">
    <tbody>
      <tr>
        <td width="125"> &nbsp;Word</td>
        <td width="180">
          <input name="txtword" type="text" id="txtword" size="20">
        </td>
      </tr>
      <tr>
        <td>&nbsp;URL</td>
        <td><input name="URL" type="text" id="URL" size="35"></td>
      </tr> 
    </tbody>
  </table>
  <br>
  <input type="submit" name="submit" value="Save">
  
<!--  <button onclick="myFunction()">Submit</button>
<p id="demo"></p>-->
</form>

<div id="div_show"></div>
</body>
</html>

<?php
	mysql_connect("localhost","root","root");
	mysql_select_db("test");
	
	if(trim($_GET["txtword"]) == " ")
	{
		echo "Please input Word!";
		exit();	
	}
	
	
	if(trim($_GET["URL"]) == " ")
	{
		echo "Please input URL!";
		exit();	
	}	
	
	$strSQL = "SELECT * FROM testtable WHERE name = '".trim($_GET['txtword'])."' ";
	$objQuery = mysql_query($strSQL);
	$objResult = mysql_fetch_array($objQuery);
	if($objResult)
	{
		//	echo "Username already exists!";
			echo "<script type='text/javascript'>alert('word already exists!');</script>";
	}
	else
	{	
		
		$strSQL = "INSERT INTO testtable (name,video) VALUES ('".$_GET["txtword"]."',
		'".$_GET["URL"]."')";
		$objQuery = mysql_query($strSQL);
		
		echo "Completed!<br>";		
		
	}

	mysql_close();
?>

J&j 27.145.107.xxx 01-11-2014 20:47:04

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

จุดที่ผมสังเกตเห็นนะครับ

1. ยังไม่มีการเรียกใช้ jquery เลย
2. โค้ดแรก บรรทัด8 slecter ไปที่ id submit แต่ รู้สึกว่า ยังไม่กำหนด id submit เลย
3. โค้ดแรก บรรทัด28 action ลบทิ้ง จะได้ไม่ต้อง รีเฟรสหน้าครับ

ลองแก้จุดที่บอกก่อนนะครับ
ลองดูครับ

น่าจะช่วยได้นิดหน่อย

wowowow 171.96.245.xxx 01-11-2014 22:01

ความคิดเห็นที่ 2

อีกจุดหนึ่งนะครับ โค้ดที่2 บรรทัด 5 และ 12

เช็คค่าว่า ดับเบิลโค้ด ให้พิมพ์ติดกันเลย ""

จากที่เคยอ่านเจอ การพิมพ์ ติด กับ พิมพ์ ไม่ติด ความหมาย ไม่เหมือนกันนะครับ

wowowow 171.96.245.xxx 01-11-2014 22:12

ความคิดเห็นที่ 3

ดูเทคนิคการใช้งาน ajax ได้ที่้หน้านี้

ทบทวนการใช้งาน submit ข้อมูลแบบ ajax และการ reset form

https://www.ninenik.com/content.php?arti_id=570 via @ninenik

ส่วนรูปแบบการ echo ่javascript ในไฟล์ ลักษณะ ที่ทำจะไม่ทำงาน
วิธีประยุกต์ ให้คืนค่าเป็นตัวเลข แล้วเอาตัวเลขไปกำหนดเงื่อนไขการ alert แจ้งเตือน

เช่น

<?php
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
mysql_connect("localhost","root","root");
mysql_select_db("test");

if(trim($_GET["txtword"]) == " ")
{
    echo "001";  // "Please input Word!";
    exit();	
}


if(trim($_GET["URL"]) == " ")
{
    echo "002"; //"Please input URL!";
    exit();	
}	

$strSQL = "SELECT * FROM testtable WHERE name = '".trim($_GET['txtword'])."' ";
$objQuery = mysql_query($strSQL);
$objResult = mysql_fetch_array($objQuery);
if($objResult)
{
    //	echo "Username already exists!";
    echo "003";
 //       echo "<script type='text/javascript'>alert('word already exists!');</script>";
}
else
{	

    $strSQL = "INSERT INTO testtable (name,video) VALUES ('".$_GET["txtword"]."',
    '".$_GET["URL"]."')";
    $objQuery = mysql_query($strSQL);
    echo "004";
//    echo "Completed!<br>";		

}

mysql_close();
?>

ไฟล์ ส่งข้อมูล และการตรวจสอบ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
<form name="form1" method="post" action="AddWord.php">    
  
  <table width="400" border="1" style="width: 400px">  
    <tbody>  
      <tr>  
        <td width="125"> &nbsp;Word</td>  
        <td width="180">  
          <input name="txtword" type="text" id="txtword" size="20">  
        </td>  
      </tr>  
      <tr>  
        <td>&nbsp;URL</td>  
        <td><input name="URL" type="text" id="URL" size="35"></td>  
      </tr>   
    </tbody>  
  </table>  
  <br>  
  <input type="submit" name="submit" value="Save">  
    
<!--  <button onclick="myFunction()">Submit</button>  
<p id="demo"></p>-->  
</form>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>          
<script type="text/javascript">
$(function(){
    
    // เมื่อ submit form id myform1    
    $("form[name='form1']").on("submit",function(){

      // เก็บชุดข้อมูลที่ต้องการส่งทั้งหมดไว้ในตัวแปร str
        var str=$(this).serialize();
        $.get("AddWord.php",str,function(data){ // ส่งข้อมูลแบบ get 
            if(data=='001'){
                alert("Please input Word!");
            }else if(data=='002'){
                alert("Please input URL!");
            }else{
//              ......  
            }
            
        });
        return false;  // ปิดการใช้งานการ submit form แบบปกติ

    });
    
});
</script>    
</body>
</html>

ninenik 1.46.16.xxx 02-11-2014

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน