jQuery post

**ggalan** · 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

Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	//$("a").click(function() {//this works
	$("#myform").submit(function() {// this doesnt
		//$.post('process.php', $("#myform").serialize(), function(data) {
		$.post( 'process.php', function( data ) {
			 $('#results').html(data);
		  });

	});//myform

});
</script>

</head>
<body>
<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=""/>  
	<br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
	<br>
<!-- The Submit button -->
	<input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><img src='red.jpg'/><div>
</body>
</html>

process.php

Code:

<?php
	//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'/>";
?>

**traq** · 10-06-2011, 02:05 AM

two things:

Code:

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

**ggalan** · 10-06-2011, 02:24 AM

thank you. what does return false; do?
re:
http://stackoverflow.com/questions/8...-in-javascript

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>

weird

**traq** · 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.

**ggalan** · 10-06-2011, 05:10 PM

that was totally my mistake, i overlooked the "ui"

Code:

<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?

**traq** · 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.

Thread: jQuery post

Thread Tools

Search Thread

jQuery post

The Following User Says Thank You to traq For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions