Confirmation of successful form submission

I have created a form to collect user details. Once the form is submitted, the page reloads. I am looking to show a success message after the page reloads.

<form name="myForm" class="contactus-template" method="post" onsubmit="return Formvalidation()">
</form>
function Formvalidation(){
    var validate = validateForm();
    if( validate == true ){
        alert("success");
    }
    else{
        alert("not success");
    }
    return validate;
}

The current script displays an alert before the page reloads. My goal is to show the alert after the reload function.

Answer №1

After reading your comment mentioning the use of cookies in a solution, I wanted to suggest an alternative method using localStorage. In my opinion, this approach is more user-friendly and less complicated, especially for static websites.

Within the Formvalidation function, you can save a success value to localStorage. Then, when the new page loads, it checks if the success value is true, displays the success message, and removes the success value from the localStorage.

Here's an example:

function Formvalidation(){
var validate = validateForm();
if( validate == true ){
    alert("success");
}
else{
    alert("not success");
}

// Remember to convert all localStorage values into strings
localStorage.setItem("formSuccess", JSON.stringify(true));

return validate;
}

Next, on your refreshed or new page, utilize a window load event listener to verify if formSuccess is true:

window.addEventListener("load", (e) => {
  const isSuccessful = JSON.parse(localStorage.getItem("formSuccess"));
  
  if (isSuccessful) {
    console.log("submission successful!");
  }

});

Answer №2

To trigger the Formvalidation() function on click of the submit button, you should change

onsubmit="return Formvalidation()"
to simply onsubmit="Formvalidation()".

Answer №3

Utilize Bootstrap Notify:

Include this code snippet:

    Notification = {
      display: function(type, title, message, url, delay) {
        $.notify({
            title: title,
            message: message,
            url: url,
            target: "_blank"
        },{
            type: type,
            showProgressbar: false,
            placement: {
                from: "bottom",
                align: "center"
            },
            delay: delay
        });
      }
    }

You can then trigger a message using PHP if the page is refreshed:

echo '<script>Notification.display("success", "", "Form submission successful!", "", 3000);</script>';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript takes the spotlight before CSS

Currently experiencing this issue in Chrome, although Firefox seems to be working fine so far. Here is a greatly simplified version of the problem: HTML: <div class="thumbnail"> <a href='#' id="clickMe">Click me!</a> </d ...

CoffeeScript equivalent of when the document is loaded

Recently, I've been delving into Coffeescript for my web application, but I'm encountering a frustrating issue. The methods are not being called until I manually reload the page. I suspect that the missing piece may be the $(document).ready(func ...

Creating a React component with a reference using TypeScript

Let's discuss a scenario with a reference: someReference; The someReference is essentially a React component structured like this: class SomeComponent<IProps> { getData = () => {}; render() { ...some content } } Now, how c ...

Axios is causing my Pokemon state elements to render in a jumbled order

Forgive me if this sounds like a silly question - I am currently working on a small Pokedex application using React and TypeScript. I'm facing an issue where after the initial page load, some items appear out of order after a few refreshes. This make ...

AngularJS gender dropdown with a default value of "empty"

I am still new to learning about angular and I am facing an issue with a dropdown menu for gender. I want to add a "--Select--" option, but it ends up duplicating. Below is the code snippet: <td style="font-family: Brandon-Grotesque, Helvetica Neu ...

Transferring information between AngularJS and Express/Node without using AJAX

My application is built using AngularJS on a node/express backend, with user authentication handled by passport. After a user signs in or signs up, the communication between my Angular controllers and express is done through $http ajax/xhr calls. The form ...

When you hover over nested HTML-lists in a webpage, make the tree's long text lines expand gracefully using a combination of HTML, CSS

In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in ...

Unable to utilize the Object.values method with an object in TypeScript

I am attempting to create an array of values from all the keys within an object by using the Object.values(obj) function, but I encountered the following error message: No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ...

Repair the voting system

In my Ruby on Rails app, I have successfully set up an up/down voting system that utilizes ajax. When a user clicks the buttons, it triggers the create method to insert a vote into the database and calculate the total sum of votes. Currently, users can fr ...

Error parsing data in Ajax POST request

I'm currently working on developing a web chat room. I encountered an issue when sending a POST request to the server using the following code snippet: var line_count = 0; $.ajax({ type: 'POST', url: '../scripts/engine.php&apo ...

Can you explain the exact purpose of npm install --legacy-peer-deps? When would it be advisable to use this command, and what are some potential scenarios where it

Encountered a new error today: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cfc4d9d5d5d6c8cfe1918f908f91">[em ...

Update the div on the current page using externally retrieved information

Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...

Dropdown functionality in JavaScript and Bootstrap

Struggling with getting the bootstrap dropdown to change class on click? Don't worry, I've managed to make it change from "+" to "-", but now I'm facing an issue. When I click on the second dropdown, the one I clicked before doesn't cha ...

Aligning content within an <a> container

I am in the process of creating a square box that is clickable and will redirect users to another page. To achieve this functionality, as well as implement hover effects later on, I am utilizing the < a > element. Below is the HTML markup: <a id ...

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

I am currently setting up a Slack bot using JavaScript combined with several useful libraries. The main function of this bot is to execute a postMessageToChannel method whenever a user in the channel mentions the specific keyword "help." However, I am fa ...

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

Background positioning in IE8 does not display as intended

I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible. Here is the CSS: .closed h2.accordion_h3 { background: url(mysource_files/down.png) no-rep ...

Ways to invoke a function simultaneously with the calling function in the React Context API

I need to implement a function update() within the context of WebContextProvider. This function will in turn call another function updateAgain() also located within WebContextProvider. Here is the code snippet for reference. import React, { createContex ...

Record every action taken in the browser and compile it into a detailed HTML report

I am looking for a way to record and display all the browser actions performed in a test script in an HTML report. I am using protractor along with protractor-html-screenshot-reporter for reporting purposes. Is there any tool or API available that can he ...

Using react-hook-form to easily update form data

While working on my project with react-hook-form for updating and creating details, I encountered a problem specifically in the update form. The values were not updating properly as expected. The issue seems to be within the file countryupdate.tsx. import ...