View Full Version : Resolved jQuery post

10-05-2011, 11:50 PM
i have a simple post that works when i assign the click to an anchor but not to the forms submit. also when i take the post out of the submit wrapper it works but the click from the form isnt. i must be overlooking something simple!!
any help would be appreciated

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">

//$("a").click(function() {//this works
$("#myform").submit(function() {// this doesnt
//$.post('process.php', $("#myform").serialize(), function(data) {
$.post( 'process.php', function( data ) {



<a style="cursor:pointer;">click</a>
<form name="myform" id="myform" action="">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
<!-- We will output the results from process.php here -->
<div id="results"><img src='red.jpg'/><div>


//print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
echo "<img src='grey.jpg'/>";

10-06-2011, 02:05 AM
two things:

$("#myform").submit(function() {
$.post( 'process.php', $(this).serialize(), function( data ) {
return false;

10-06-2011, 02:24 AM
thank you. what does return false; do?

also this doesnt work
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

but this does
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


10-06-2011, 02:22 PM
return false; prevents the default ("normal") action from happening; in this case, the normal form submission (which would take us away from the page that we're dealing with).

Regarding your script URL, sorry! --since you said that the .click() function was working, I assumed you had a link the jquery elsewhere on your page. jQueryUI is like an "extension" for jQuery; it doesn't include jQuery itself. It's basically a bunch of common user interface methods (like tabbed content, drag-and-drop, accordians, etc.). I don't like it, generally; I think it's too heavy.

10-06-2011, 05:10 PM
that was totally my mistake, i overlooked the "ui"

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

is there a work around, to not include jQueryUI and still get the same benefits?

10-06-2011, 05:57 PM
you mean the benefit of the UI methods? not directly. there are plug-ins that have much of the same functionality, but you'd need to install them individually (and, of course, find them).

Most of the time, however, I only need one or two methods from the set, so it's not a problem getting it done separately. In addition, I find that the main jQuery library is usually more than enough to accomplish whatever functionality I need.

In your case, you're not using anything (in the code you posted) from the jQuery UI anyway.