We Keep Coding

HTML form reset after AJAX submit

I have a simple HTML form, with reset and submit buttons, which is submitted using an AJAX call.
Before any submit, the reset button is restoring form's initial state and I'm OK with that!
Buf after submitting the form, if I modify input values, I would like the reset button to restore form's state as it was after the last successful submission!
Is there any way to do this without reloading or recreating the form?
Best regards,
Thierry

It depends how you are submitting the form, but in general, with ajax, there is no kind of redirect, so the only question is removing the currently entered data to its default value.
Simple, at the start of the form loading (possibly at page load, but if its being generated after somehow, then right after its made), simply loop through the elements of the form and keep track of the values and store it to some kind of dictionary or array, then, after the ajax is submitted, reloop through the form and reset the values to the other corresponding values from before.
For example, if I had a form with an ID of "testForm"
let list = Array.apply(0, testForm.elements).map(x=>({name:x.name, value:x.value}))
...do ajax stuff, then after submitting the form:
Array.apply(0, testForm.elements).forEach((x, i) => {
x.name = list[i].name;
x.value = list[i].value
});
should reset it to the default values.. Possibly resetting the name is unnecessary, but its possible it was changed theoretically..

The main idea - save state
const input = document.getElementById("name");
const reset = document.getElementById("btn-reset");
const save = document.getElementById("btn-save");
const state = {
name: ''
};
save.addEventListener('click', () => {
// send AJAX
const value = input.value;
setTimeout(() => {
const serverResponse = {name: value};
state.name = serverResponse.name;
}, 1000)
});
reset.addEventListener('click', () => {
input.value = state.name
});
<input id="name" value="">
<button id="btn-reset">Reset</button>
<button id="btn-save">Save</button>

Form help(HTML/JS)

I'm (very) new to web development and am working on learning back-end currently.
I am trying to figure out how to use multiple inputs inside a form, but am struggling to get the actual input, instead of the element itself using this code to create the form:
<form id="newPostForm">
<input name="titleInput" placeholder="title"><br>
<input name="bodyInput" placeholder="body">
<button>Submit</button>
</form>
and this JS to try and output the user input to the console:
const newPost = document.getElementById("newPostForm")
const title = document.querySelector(".titleInput")
const body = document.querySelector(".bodyInput")
newPost.addEventListener("submit", (e) => {
e.preventDefault()
console.log(title, Body)
})
When I hit the submit button the console displays null null. This is probably a super simple question, but I'd appreciate any help.

After fixing the case issue with your body variable, you need to get the value of the inputs by accessing their value property. Then you want to move those variables into your submit handler, otherwise you're only getting the value once, when the page loads, and they're blank:
const newPost = document.getElementById("newPostForm");
newPost.addEventListener("submit", (e) => {
const title = document.querySelector(".titleInput").value;
const body = document.querySelector(".bodyInput").value;
e.preventDefault()
console.log(title, body)
})
<form id="newPostForm">
<input name="titleInput" class="titleInput" placeholder="title"><br>
<input name="bodyInput" class="bodyInput" placeholder="body">
<button>Submit</button>
</form>

How to show the data from my form in console?

I have a form with a couple of inputs. I want to show the value of the inputs (including the names of the fields) in console in json format when I click the submit button.
How can I do this? I read about new FormData way, but I don't really understand how to use it (so far I've come up with this code, but it doesn't work)
//popup is my form
popup.addEventListener("submit", function (event) {
let formData = new FormData(popup);
console.log(formData);
event.preventDefault();
}, false);

If you want to get all of your data in your form (including names), and you ain't planning to use jQuery, you can try to handle the inputs by yourself based on the form:
const form = document.myForm;
form.addEventListener("submit", function(event) {
event.preventDefault(); // Always preventDefault() first
let formData = new FormData(this);
let object = {};
formData.forEach((value, key) => {
object[key] = value
});
let json = JSON.stringify(object);
console.log(json);
}, false);
<form name="myForm">
<input name="input1">
<input name="input2">
<input name="input3">
<button>Submit</button>
</form>

Javascript automatic save input txt value to div

I looking for some help to solve my problem.
I need to write JS function witch automatically save value of input field into div (with no button).
When value ends with "enter" key it save it to div, clear input field and set cursor in it again to put another value.
If anybody understood my english I would be appreciate for some tips:)

Here is a very simple example to get you started.
const formElement = document.getElementById("form");
const inputElement = document.getElementById("input");
const outputElement = document.getElementById("output");
formElement.addEventListener("submit", function (e) {
outputElement.append(inputElement.value);
inputElement.value = "";
e.preventDefault();
}, false);
<form id="form">
<input id="input"></input>
</form>
<div id="output">
</div>

How to submit form after event.preventDefault();?

I have used javascript to add this when a particular page get loaded.
document.getElementById('commit').addEventListener("click", validateSubmit,
false);
this validateSubmit method have some code which will validate form data and
it will do this
function validateSubmit(){
//some code
window.addEventListener('submit', newsubmit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;
}
function newsubmit(event) {
var target = event ? event.target : this;
event.preventDefault();
return false;
}
so for the first time while submitting form by clicking its coming in this method and it is preventing form values to submit and after fixing al those values when i am again trying to click on submit button then its not working,in console i am getting this error-
"Uncaught TypeError: Cannot call method 'preventDefault' of undefined"
Please help me...
Thanks in advance..

Try changing your function declaration from
function newsubmit(event) {
to
var newsubmit = function(event) {
the function has to be declared as a variable if you want to use it as a parameter of an event listener.

I don't think you need to go through such pains to prevent user from submitting incomplete form. Try this:
<form name="form1" id="form1" onsubmit="return validateForm()" ....>
<input type="text" id="txtName" />
</form>
function validateForm()
{
//CHECK IF FORM FIELDS CONTAIN VALID VALUES?
var formValid=....;//validation logic
return formValid;
}
Now if during validation you find any error you will set formValid variable to false otherwise if all input is correct set formValid to true. When form will getfalseas return value fromvalidateForm` function it will not submit.

Try this:
function validateSubmit(){
window.addEventListener('submit', newsubmit, true);
HTMLFormElement.prototype.submit = newsubmit;
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
}
function newsubmit(event) {
var target = event ? event.target : this;
event.preventDefault();
return false;
}