Save data to JS array before submiting form

Question

Is there a way I can store form information using javascript and jquery to the variable first and only when user hits submit button, save that data, else discard it.

I know html forms do the same, but I have an example where I can add multiple content using same input field and when user clicks add button content is sent to controller via ajax and manipulated then inserted in database and displayed from database entry instantly. But I don't want to save that data to database beforehand, only when complete form is submitted.

So I want to save that data to some array first not directly to database, display it and save it to database only when user clicks submit button and sends the entire form to the server.

Answer 1

You can use onsubmit event (attached on form element) to execute javascript code before submiting the form.

So you can make all needed changes just before submiting, or even stop the submit and start an ajax.

Answer 2

You can add an event handler that will add the data every time something changes in the input field using this.

And every time you update an array accordingly. Also you can use an object with different properties which I think is best.

Answer 3

Yes, you can prevent your form submitting, by using the below code.

$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
});

// and use this to create a json array of form.
$( this ).serializeArray();

Answer 4

$("form").submit(function(event) {
    var newArray = $(this).serializeArray();
    event.preventDefault();
});