Develop Reference

How to execute function after submit and page load

I trying to do simple registration form with error message for wrong data format. Till now I have index page with form, submit button that send the data to .js file where I make the validation. The problem is that I can execute function in the index page from the .js file and update my span message, but my page reload and I lose it. How I can make message that survive the reload or better to return the message after page reload?

If a button is tagged as submit, the page always reloads, this is how the submit property works. Unless you redirect it specifically somewhere, it would reload. My suggestion is link it to a database. Store the contents of text inputs, etc in a variable or a document in databases such as firebase so that even after the reload the data is stored in the cloud or on a database somewhere.
Since its a form, you're anyways going to have to store the data on a database so try out firebase / AWS and see if it works for you. When it submits, have an onEvent (HTML) or a variable and 2 if statements (Have an if statement to change a variable from false to true / other way round when submit is clicked and another if statement for the value of the variable to store the data), or any other method that works for you as this will make sure the data is stored so it can be saved after a submission.

I decided to use input onfocusout="myfunction(name.value) so when you click outside of the textbox where you typing you will get text that show you where you must to make changes if something is wrong. The problem with this is that now I must to have my code inside .js and in same time in my index page. It looks to me very fishy, but I saw this type of forms in many sites, but I am not sure how they achieved it with no using their validation code this way.

When I perform the ajax request that performs sign up or login it doesn't work properly

I am trying to make a sign up and login forms in a project that follows MVC pattern. So we can divide the process into 3 parts: 1- the front-end which is html,css and javascript. 2-Server-side which is PHP 3- database which is MySQL. The problem I have is that when I submit the form either Login or sign up I get a strange behavior that depend on the values i'm sending to the PHP code.
for the sign up process. when I submit the email and password the ajax request send successfully the data and the username and password are correctly inserted into the database, but the on success function is not called. and the page is refreshed.
for the login processes. consider we have an already existing user in database 'user1#gmail.com' and password '1234'. if I entered the correct username and password I get the same behavior as the signup the page is refreshed and on success function is not called and the correct behavior that should happen based on the following codes that it should overwrite the page with the response, but if I send the correct username and password field is empty the onsuccess function is called and write in the document the response 'Hello from login wrong'. In the codes I wrote document.write() function to show only the response but it's not for the real implementation.

There are multiple ways to stop your form from submitting during ajax processing, one easy solution is to change your submit button to a button.
You do this by changing:
type="submit"
to
type="button"

How to perfom 2 different actions using only 1 submit button on a form

I have a submit button for logging into my PHP/MySQL system. However, I would like to able to log in and at the same time take the credentials and store them in indexedDB when the button is clicked, is there any way of achieving 2 actions at the same time. So far if I include my javascript code for submitting to indexedDB, the login does not work, and if I remove the code, the login works.

What you could do is have your form take you to your first page, then do both the actions with all the data send to your form.
With a simple HTML/PHP form, this is simple. Submit the form to a new PHP page using action="submit.php". Then do your indexedDB call on this page, and echo out a copy of the form, complete with the data (POST or GET), but with your login page as the newactionthen echo a` tag like so:
echo "<script>document.getElementById('myForm').submit();</script>";
Then it will login via your login page.

If you want to save data in IndexedDB before logging in the user:
You can achieve this by calling a javascript function onSubmit. And inside that function, you can hit a GET/POST URL to save data in Indexed DB.
OR if you want to perform this task on the server side then One way of doing this is: Upon successful login or while verifying user's credentials, you can call a function to save data in your indexedDB. This function could be sync or async.

onclick="doSomething();"
function doSomething(form){
// do something
// do something else
// Finally submit the form
form.submit();
return true;
}

seperate with two ;
onclick="doSomething();doSomethingElse();"
You're good to go!

Reading / Accessing API response while using Ninja Forms Webhooks add-on

I am using Ninja Forms with Webhooks add-on to submit form data to a third party API. Everything works fine, the data is submitted and I can see a response when running add-on in debug mode.
The question is how do I access an API response so I could use the response data as it returns user ID based on my submitted data. I need to submit that ID to the next page.
My form works as follows:
1. User inputs data
2. Form is submitted to API
3. User is redirected to another page
I need to be able to get user ID from an API response. Thanks!

I realize you've long since moved on from this situation, but for others coming here from search results I have a partial answer.
Checking the Webhooks plugin code, there are several undocumented actions and filters, in particular nf_remote_get and nf_remote_post, both of which are actions that let you do something with the raw response.
function act_on_nf_remote_post_response( $response, $form_id ) {
// output to debug log
error_log( print_r( $response, true ) );
}
add_action( 'nf_remote_post', 'act_on_nf_remote_post_response', 10, 2 );
Unfortunately, it does not pass other data about the submission, only the ID of the form it belongs to, so it would take some gymnastics to store what you need and then reference it in a new page load while also ensuring it's the same user, possibly with some $_SESSION stuff.

How to prevent double submission after page refresh

I have a 'contact us' html form and I'm giving gift for each member that click submit.
I want to make sure that a user doesn't submit twice (with different name and email).
I can disable the button after click, but what will be the best solution to prevent submit after page refresh?
Thanks

Is to directly redirect from your POST to a GET request or page. if he/she refreshed it will refresh the other page. this is named Redirect After Post and you can read more about it here and in WikiPedia
An Example can be found here.

Two things that you can do and you should do.
First disable the Submit button as soon as your client submits the form
with valid information in it. So that he/she accidently doesn't send
duplicate information in the form.
Second, which is more important. Is before you save this information in
your database whatever that is MySQL, MongoDB or etc. You perform a query
that checks whether the information provided by the user exists in your db
already or not. If not then proceed as you do but if it does you can do
error handling on the use case scenario as per your business logic.

<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
See https://stackoverflow.com/a/45656609/1066234