.post() Basics

[chasethemetal]

Hey all, I am trying to learn how to create a very simple Hello World ajax jquery example using PHP as the processor. And I'm not sure how to achieve this in a very simple manner. I found examples that used a jQuery validate plug in. But I was wondering what the most simple method would be. Also the point of this is to change the content of #results div without reloading the page. My simple code looks like this thus far. jQuery

$(document).ready(function(){$.post('process.php', $("#form").serialize(), function(data) {$('#results').html(data);}); });

HTML

 <form name="form" id="form" action="" method="POST">  <input type="text" name="var1" id="var1" size="30" value=""/>  <br /><input type="submit" name="submit" id="submit" value="Submit" /></form> <div id="results"><div>

PHP

 $a = $_POST['var1'];echo 'Hello '.$a.'';

Any pointers would be appreciated! Thanks so much!

[thescientist]

I think the issue is that you want to capture a submit event rather than allowing the form to post as it would natively (when the submit button is clicked). You could simply use a button to act as a submit button rather than an actual submit button and attach a click event handler to that, rather than trying to capture the submit event and having it return false to prevent the default submit behavior.

[chasethemetal]

Thanks! But using the submit() method the page will have to reload correct?

[thescientist]

Yes. I can only assume that is your issue since you didn't clearly state the problems you are actually encountering. The point of not using a submit button is that you won't fire he form's native submit event, instead the button with a click event handler would call a function that executes the post for you. alternatively, you can continue to use the form's native submit functionality and intercept it like sohttp://api.jquery.com/submit/

[chasethemetal]

I want to use Ajax method's, I am trying to illustrate to myself the most SIMPLE version of this, If I can figure out how to make this simple task happen I'll be able learn more quickly.In english what my example is attempting to do is: You have a form, you type in data, that info is sent to a process page when a specific form is submitted, then the results are displayed in a div. This way the page doesn't have to reload only the specific element. I have found examples online of how to do this, but all of them have a bunch of extra features and functionality. I'm just trying to see what the simple core idea would like without any bells and whistles.

[thescientist]

I want to use Ajax method's, I am trying to illustrate to myself the most SIMPLE version of this, If I can figure out how to make this simple task happen I'll be able learn more quickly.In english what my example is attempting to do is: You have a form, you type in data, that info is sent to a process page when a specific form is submitted, then the results are displayed in a div. This way the page doesn't have to reload only the specific element. I have found examples online of how to do this, but all of them have a bunch of extra features and functionality. I'm just trying to see what the simple core idea would like without any bells and whistles.

Ok, but you can still use ajax. You can use submit to intercept the form's native submit event and make the ajax request as part of that event capture, and then handle accordingly to keep the page from reloading. Did you look at the link? It shows an example of calling a function on submit(). You can just make your ajax request there, and return false or use preventDefeault on the event object, as the link explains. OR Don't use a submit button, and just use a button or any other element that you can apply an click even to and call your post function that way. The point is, you need to trigger the post() request somehow, not just have it run automatically on page load.

[chasethemetal]

Ok I'm following you now. Thank you.

[chasethemetal]

Solution

 $(document).ready(function(){$('#form').submit(function() { $.post('process.php', $("#form").serialize(), function(data) {$('#results').html(data);});   return false;});});

Thanks so much for pointing my mind in the right direction.

[thescientist]