i have a form that i submit to a database using ajax, there a div on the page which has a database binding which counts the total number of records submit on page refresh. now what i want to do is onsubmit of the form, i should add 1 to the binding in the div which counts the total number of records submitted
<div id="count_div"></div>
<form id="form2" name="form2" method="POST" action="<%=MM_editAction%>">
<input name="comment" type="text" id="comment" size="50" />
<input name="imageField3" type="image" id="imageField3" src="imgs/buttons/comment.png" align="bottom" />
<input name="wardrobe" type="hidden" id="wardrobe" value="1" />
<input name="comme" type="hidden" id="comme" value="2" />
<input name="comfn" type="hidden" id="comfn" value="3" />
<input name="photo_id" type="hidden" id="photo_id" value="4" />
<input name="ctype" type="hidden" id="ctype" value="picture" />
<input name="resp_email" type="hidden" id="resp_email" value="4" />
<input type="hidden" name="MM_insert" value="form2" />
</form>
AJAX
<script>
$(document).ready(function(){
$("#form2").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "int_p_cmt.asp",
data: data
}).success(function() {
$("#msg_div").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your comment has been saved </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
UPDATED:
<script>
$(document).ready(function(){
$("#form2").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "int_p_cmt.asp",
data: data
}).success(function() {
window.counter=parseInt($('#count_div').html());
window.counter++;
$('#count_div').html(window.counter);
$("#msg_div").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your comment has been saved </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
if what I understood is correct: you want to increment th value of the "count_div" div then try this:
$(document).ready(function(){
$("#form2").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "int_p_cmt.asp",
data: data
}).success(function() {
$("#msg_div").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your comment has been saved </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 1000);
$("#count_div").html(parseFloat($("#count_div").html())+1);
$("input[type=text]").val("");
});
});
});