Hi,
I need to make a small plugin/ module.
There would be a text field with submit button. This text field to enter zipcode. Onece an user submit a zipcode some info will be fetched from database. I know how to connect database, basic php mysql, javascript.
Thanks
So what exactly do you need? Seems that you have the knowledge to complete this task. Show us your code so far and point out where it's going wrong or which bits are causing confusion.
Hi Diafol, Here is the code I have. This script send http request once I load it in the browser. But I want to send http request when submit button is clicked.
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script id="source" language="javascript" type="text/javascript">
$(function myFunction()
{
$.ajax({
url: 'api.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
//--------------------------------------------------------------------
// 3) Update html content
//--------------------------------------------------------------------
$('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
}
});
});
</script>
</head>
<body>
<h2> Client example </h2>
<form onSubmit="myFunction()">
<input type="submit" value="Submit">
</form>
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text replaced</div>
</body>
</html>
Scrips below is the api.php file
<?php
//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "localhost";
$user = "root";
$pass = "";
$databaseName = "ajax01";
$tableName = "variables";
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
include 'DB.php';
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query("SELECT * FROM $tableName"); //query
$array = mysql_fetch_row($result); //fetch result
//--------------------------------------------------------------------------
// 3) echo result as json
//--------------------------------------------------------------------------
echo json_encode($array);
?>
I generally place all js references and scripts at the end of the page - just before the close </body> tag. That way you can avoid the onready stuff.
<html>
<head>
<title>Ajax Trial</title>
</head>
<body>
<h2> Client example </h2>
<input type="submit" id="submit" value="Submit">
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text replaced</div>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script id="source" language="javascript" type="text/javascript">
function myFunction()
{
$.ajax({
url: 'api.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
//--------------------------------------------------------------------
// 3) Update html content
//--------------------------------------------------------------------
$('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
}
});
};
$('#submit').click(function(){
myFunction();
});
</script>
</body>
</html>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.