PDA

View Full Version : Resolved 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


<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


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

$("#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/855360/when-and-why-to-return-false-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"


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