How can I get the echo value from my php script using the JQuery Form Plugin? - forms

Question

I am used to get the echo message of the php script using the jquery ajax success function now I use a plugin but I dont know how to use it
my approach is this but definitely do not work how should the right way? It just go directly to my php script
$(function() {
$('form').ajaxForm(function() {
success: function(data){
$('.new-profile-pic').html(data);
}
});
});
HTML:
<p class="new-profile-pic">
<!--Image should be here-->
</p>
<form enctype="multipart/form-data" action="upload-image.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="100000">
<input class="profile-pic-name" name="uploadedfile" type="file">
<input type="submit">
</form>
PHP:
<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo '<img alt="" src="'.$target_path.'">';
} else{
echo "There was an error uploading the file, please try again!";
}
?>

Answer 1

You need to prevent the default action from occuring.
I believe this post has the answer you are looking for:
How do I submit a form using jquery (ajaxForm plugin) to an external site but not reload to a different page?
You need to use .preventDefault() on the submit event, or get it to return false on the form submit, e.g.:
<form enctype="multipart/form-data" action="upload-image.php" method="post" onsubmit="return false;">