POST form on button click using jquery ajax - php

Question

i'm trying to load form via ajax and submit form then write response to "#pagediv".
Here is my working code
$(function() {
$.ajax({
url: "<?php echo $_SERVER['PHP_SELF']; ?>",
type: "GET",
data: { <?php echo $ajxparam; ?> },
dataType: "html",
cache: false
}).done(function( msg ) {
$("#pagediv").html(msg);
$("#savebtn").click(function(event){ event.preventDefault(); $("#testform").submit(); });
}).fail(function() {
$("#pagediv").html( "Request Failed. Please Try Again Later." );
});
});
modified code in form submit part(refer below); its not working, did i missed anything?
$(function() {
$.ajax({
url: "<?php echo $_SERVER['PHP_SELF']; ?>",
type: "GET",
data: { <?php echo $ajxparam; ?> },
dataType: "html",
cache: false
}).done(function( msg ) {
$("#pagediv").html(msg);
$("#savebtn").click(function(event){
event.preventDefault();
$("#testform").submit(function(evt) {
evt.preventDefault();
var $form = $( this ),
url = $form.attr( 'action' );
var posting = $.post( url, $(this).serialize() );
posting.done(function( dte ) {
$("#successdiv").html(dte);
});
});
});
}).fail(function() {
$("#pagediv").html( "Request Failed. Please Try Again Later." );
});
});
Note:- Form POST URL is different from ajax load main page.

Answer 1

Inside your click event handler you're adding a submit event handler and not actually submitting the form. Since you're uploading the data via ajax on a button click just call the ajax in the button click callback.
$("#savebtn").click(function(event){
event.preventDefault();
var $form = $("#testform"),
url = $form.attr( 'action' );
var posting = $.post( url, $form.serialize() );
posting.done(function( dte ) {
$("#successdiv").html(dte);
});
});