Cannot save form with data populated by ajax jquery

Cannot save form with data populated by ajax jquery

I am retrieving html data from a page and it's being displayed properly in the page - everything good so far. This is that code...

$.ajax({

type: "POST",

url: "myurl",

cache: false,

beforeSend: function(){

$("#spinner").show();

},

data: {

id_code: id,

mode: mode,

IndexAbove:indexAbove

},

success: function(data){

$('#entrytable').html(data);

},

error:function(xhr, status, error) {

alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);

},

complete: function(){

$("#spinner").hide();

}

});

When I enter a value to the table and click submit it calls another ajax to submit the form. However, it doesn't save to the Database; I think is because the table is not being added to the DOM and the <form > doesn't see it as part of the form. I have spent like 7 hours on this and nothing works. I don't see errors on FF Firebug or webconsole and the display looks just how I want it, but it doesn't save. IF, I change the above by retrieving the data by php the save works. I want to do it with AJAX jquery to avoid page reload. Hopefully, you can help me.

$(function(){

$("#my_form").submit(function(event) {

event.preventDefault();

var form = $(this);

var formdata = form.serialize();

$.ajax({

type: form.attr('method'),

url: form.attr('action'),

data: formdata,

beforeSend: function(){

$("#spinner").show();

},

success: function(data){

$("#results").replaceWith($("#results", $(data)));

window.scrollTo(0,document.body.scrollHeight);

return ResetDistribute();

},

error: function(){

alert("there was an error");

},

complete: function(){

$("#spinner").hide();

}

});

});

});