ajax validation for multiple forms on page, all have same class
basically i am making a CMS and want to have in post editing.
How it works atm is that the blog post is echoed out (PHP) and there is a
hidden ckeditor which when an edit button is clicked gets displayed. The
edit button is then replaced with a save button.
This all works fine and good however the issue comes when saving the blog
post.
the php works fine, and the ajax validation also works fine but ONLY when
there is 1 blog post.
When there is more than 1 post the errors come. The issue is that it seems
to be that the save post button is sending all of the data from every blog
post. I checked it with the firebug net and saw that all data is being
sent.
I just need a way of making it so that the save button in the form, only
affects the data inside of that form. At the moment the error / success
message is displayed by all of them.
Here is the post echoed out:
<div class="blogtest">
<form action="process/updatepost.php" class="updatepost" method="post">
<input type="button" class='.$editenabled.' value="Edit">
<input type="submit" class="saveupdatebutton" value="Save">
<input type="hidden" class="postid" name="postid"
value="'.$postID.'">
<div class="text">
<div class="buildtext">'.$text.'</div>
<div class="editor"><textarea name="ckeditor"
class="ckeditor">'.$text.'</textarea></div>
</div>
</form>
</div>
This is the javascript:
$(document).ready(function(){ $(".updatepost").submit(function(){
$(".error").remove();
$(".success").remove();
// If there is anything wrong with
// validation we set the check to false
var check = true;
// Get the value of the blog update post
var blogpost = $('.ckeditor').val();
// Validation
if (blogpost == '') {
check = false;
$('.ckeditor').after('<div class="error">Text Is Required</div>');
}
// ... goes after Validation
if (check == true) {
$.ajax({
type: "POST",
url: "process/updatepost.php",
data: $(".updatepost").serialize(),
dataType: "json",
success: function(response){
if (response.databaseSuccess)
$('.ckeditor').after('<div class="success">Post Updated</div>');
else
$('.ckeditor').after('<div class="error">Something went
wrong!</div>');
}
});
}
return false;
});
});
Thanks for reading. Hope you can help.
No comments:
Post a Comment