An easier way to do it is just build a normal form that submits the data the usual way. Without JS, this should work as advertised.
If JS is enabled, you can simply "hi-jack" the form's submit event, prevent it from happening, and do everything in JS from this point onwards. No need to replace DOM elements.
$('yourFormSelector').on('submit',function(event){
// Prevent the form from submitting normally
event.preventDefault();
// Turns the form into a JS Objec
// https://stackoverflow.com/a/1186309/575527
var formData = $(this).serializeObject();
// Do AJAX magic here
});
To gather the form data, this answer contains a very handy method that gathers named and enabled form inputs and turns them into a JS object. You can use this function to gather the form data and feed it to your AJAX call.