Replace // ? with:
$(function(){ // 1
$("form").submit(function(){ // 2
var value = $(this).find("input[name=test]").val(); // 3
$.post("/test/ajax/record/",{"test":value},function(){ // 4
alert("Message sent successfully!"); // 5
});
return false; // 6
});
});
Notes for each line:
1. $(function(){}) is short hand for $(document).ready(function(){}), this
means your javascript won't run until the entire document is loaded, check
out:
http://docs.jquery.com/Events/ready
2. We bind a function to execute when our form is being submitted:
$("form") finds all of the <form> elements on the page (there is only one
right now)
$("form").submit() binds a function to the submit event of the form (what
takes place when you click the submit button), see:
http://docs.jquery.com/Events/submit#fn
3. When a function is bound to a select set ($("form") =>
$("form").submit()), the "this" keyword is automatically set to the element
we are currently with, so rather than writing $("form") again, we can simply
refer to $(this), see:
...the 'this' keyword points to the specific DOM element...
http://docs.jquery.com/Core/each
4. The $.post function has three parameters:
a. The URL target for the post
b. Variables to be sent to server: {"var":"value"} (Accessible in PHP using
$_POST['var'])
c. A callback function to be executed when the AJAX message successfully
sends and receives a response, see:
http://docs.jquery.com/Ajax/jQuery.post#urldatacallback
5. A JavaScript popup for succesful completion.
6. return false to prevent the form from actually submitting, which would
take us away from the current page, see:
http://docs.jquery.com/Events_(Guide)#event.stopPropagation.28__.29
So, that, in a nutshell is how to do Ajax with jQuery without a plugin.
There is a lot of other stuff thrown in, so definitely check out the
resources before embarking on your AJAX trip and learn all the things jQuery
can do.
- jake
On Dec 20, 2007 1:49 PM, jjshell <[EMAIL PROTECTED]> wrote:
>
> Hello,
> I'm new to jQuery (and AJAX for that matter). Even if the library is
> really easy to use, I'm still having problems "ajaxing".
>
> I'd like to understand how to post the following simple form to the
> server, and send a message to the client depending on the submission
> process output (telling him if what he submitted is ok or not).
>
> Would someone be kind enough to guide me through the steps?
>
> Here's the HTML bit. I am going to use jQuery with the Zend Framework
> (PHP).
>
> <html>
> <head>
> <script type="text/javascript" src="jquery-1.2.1.js"></script>
> <script type="text/javascript">
>
> //?
>
> </script>
>
> </head>
> <body>
>
> <form action="/test/ajax/record/" method="post">
>
> <input type="text" name="test" value="" />
> <input type="submit" name="ajax" value="save" />
>
> </form>
>
> </body>
> </html>
>
