Many times, you collect input from the user and pass that input to the server for further processing. jQuery AJAX makes it easy to pass collected data to the server using the data parameter of any available Ajax method.
Example
This example demonstrates how to pass user input to a web server script, which sends the same result back, and we print it:
<html>
<head>
<title>AJAX Input Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name": name});
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="text" id="name" size="40" /><br />
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>
|
Here is the code written in the result.php script:
<?php
if ($_REQUEST["name"]) {
$name = $_REQUEST['name'];
echo "Welcome " . $name;
}
?>
|
Now you can enter any text in the input box and click the "Show Result" button to see what you have entered in the input box.
Comments
Post a Comment