Changing html content of a div before and after ajax request
- by R27
I am trying to change the button "ADD" (in a div) to some text/img as soon as it is clicked. And after the ajax request is processed, in the success block , I want the div to get the button back.
I see the ajax request is itself not getting processed. Can someone explain whats my mistake.
I just removed the jsfiddle link and pasting the script here to avoid confusion about the dependencies.
JS script
var ajax_load = "Please wait...";
jQuery(document).ready(function($) {
$("#add_button").click(function(event){
var st = $("#add_div").html();
$("#add_div").html(ajax_load);
$("#sform").validate({ errorClass: "error",
submitHandler: function (form) {
alert('inside submit');
$.ajax({
type: "GET",
url: 'form.cgi',
data: $("#sform").serialize(),
success: function (msg) {
alert('msg');
$("#add_div").html(st);
$("#sform")[0].reset();
}
});
}
});
});
});
And the html piece is
<form id=sform>LABEL
<input id=field1 type=text>
<div id="add_div">
<input type="button" value="ADD" id="add_button">
</div>
</form>
I have jquery.validate.min.js script included.
