Tuesday, July 28, 2009

Jquery form Post request

hi , i have seen this on many website without refreshing a webpage directly value get upadted
how it can be happen? yes its possble with the AJAX / Jquery because it use XMLHttpRequest Object

here is my Example on how you can achive this using Jquery

Steps

1. Add the Jquery liblary in <head> Section
you can download jquery library from here

2. now supoose if we change the price from dropdown the Event should occur .


<select name="Price" id="Price" onchange="update()">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>


3. Now create a function update()

function update()
{
txtQty = document.formname.price.value;

$.ajax({
type: "GET",
url: "update.asp",
data: "Price="+txtprice+"&id="+id,
success: function(msg){
$("#ShowPrice").html("<font color="red">Price updated as</font>"+(price)+");
}
},
error: function(msg){
alert( "Error :" + msg);
}
});
}
</script>


4. Now create "update.asp" page in that get the request and update the records and send yes or no message to main page

5.here is complete example.



<html>
<head>
<title> Jquery Example </title>
<script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript" ></script>
<script language="javascript" type="text/javascript" >
function update()
{
txtQty = document.formname.price.value;

$.ajax({
type: "GET",
url: "update.asp",
data: "Price="+txtprice+"&id="+id,
success: function(msg){
$("#ShowPrice").html("<font color="red">Price updated as</font>"+(price)+");
}
},
error: function(msg){
alert( "Error :" + msg);
}
});
}
</script>
</head>
<body>

<b>Update Price </b>
<br>
<form name="formname" >
<select name="Price" id="Price" onchange="update()">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<br />
<input type="text" ID="ShowPrice" value="">
<input type="submit" value="submit">
</form>
</body>
</html>

No comments:

Post a Comment