jquery ajax function not working
Try this
$("#postcontent").submit(function() {
return false;
};
$('#postsubmit').click(function(){
// your ajax request here
});
put the event handler function inside $(document).ready(function(){...}). it shall work now
also add preventDefault() to restrict page refreshing
$(document).ready(function() {
$("#postcontent").submit(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
url : "add_new_post.php",
data : $("#postcontent").serialize(),
beforeSend : function() {
$(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
},
success : function(response) {
alert(response);
$("#return_update_msg").html(response);
$(".post_submitting").fadeOut(1000);
}
});
e.preventDefault();
});
});
try this code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<Script>
$(document).ready(function(){
$("#postcontent").click(function(e) {
$.ajax({type:"POST",url:"add_new_post.php",data:$("#postcontent").serialize(),beforeSend:function(){
$(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
},success:function(response){
//alert(response);
$("#return_update_msg").html(response);
$(".post_submitting").fadeOut(1000);
}
});
});
});
</script>
<form name="postcontent" id="postcontent">
<input name="postsubmit" type="button" id="postsubmit" value="POST"/>
<textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>
you need to prevent the default behavior of your form when submitting
by adding this:
$("#postcontent").on('submit' , function(e) {
e.preventDefault();
//then the rest of your code
}