Hello you naughty code animals..
I have tried to get this code to work, and also searching it up. But i find no up-to-date answer i can understand. So i'll give you the form, then the jQuery.
FORM:
<div id="blab_form_overcontent">
<table border="0" align="center">
<form id="submit_blab" method="post">
<input type="text" name="blab_title" id="blab_title" value="" placeholder="title(optional):"/><br/>
<textarea name="blab_text" id="blab_text" value="" placeholder="text:"></textarea>
<input type="submit" id="blab_submitb" name="blab_submitb" value="Post"/>
</form>
<div class="success" style="display: none;">Blab has been added.</div>
</table>
</div>
jQuery:
$(document).ready(function(){
$("form#submit_blab").submit(function() {
// I store the values from the form input box, then send via ajax below
var blab_title = $('#blab_title').attr('value');
var blab_text = $('#blab_text').attr('value');
$.ajax({
type: "POST",
url: "classes/profileActions.php",
data: "blab_title="+ blab_title +"& blab_text="+ blab_text,
success: function(){
$('form#submit_blab').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
NOTE: i know its not my profileActions.php that is the problem because the code over dont get as far as posting anything. It reloads the page only.
Regards, -Clueless idiot.
It's refreshing the page because you aren't telling it to NOT refresh the page. :)
$('#submit_blab').submit(function(e){
//start with preventing the default submit action...
e.preventDefault();
var blab_t = $('#blab_title').val();
var blab_txt = $('#blab_text').val();
var json = { blab_title: blab_t, blab_text: blab_txt }
$.ajax({
type: "POST",
url: "classes/profileActions.php",
data: json,
success: function(){
$('form#submit_blab').hide(function(){$('div.success').fadeIn();});
}
});
});
In addition to the refresh issue mentioned in another answer, your data
query string is odd. You don't need to encode the &
and there are extra spaces in there. Better to use an object literal instead:
// Instead of:
data: "blab_title="+ blab_title +"& blab_text="+ blab_text,
// Use an object literal:
data: {
"blab_title": blab_title,
"blab_text": blab_text
},
Or you can use serialize()
to pass the data in POST
data: $("#submit_blab").serialize(),
Also, you might as well change submit to click
$("#blab_submitb").click(function(e)