HTML - Display text after form is submitted

Question

How can I display a text like "Your input was submitted" after the submit button was clicked. My document is a Java-Server-Pages file.

I have an HTML form like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name=test action=greetings.jsp method=POST>
<label for="name">Name:</label><br>
<input type=text id=name /><br>
<label for="surname">Surname:</label><br>
<input type=text id=surname/><br><br>
<input type=submit value=Save>
</form>
</body>
</html>

You can add an event listener to your button and insert the tag you need (in the body tag), like in this example: https://stackoverflow.com/questions/13495010/how-to-add-content-to-html-body-using-js/13495046 — JKD, Sep 22 '20 at 11:43

score 1 · Accepted Answer · answered Sep 22 '20 at 10:39

If you prefer binding your events outside the html-markup (in the javascript) you could do it like this:

document.getElementById("btn").addEventListener(
  "click",
  function(event) {
    if (event.target.value === "Save") {
      event.target.value = "Saved";
    } else {
      event.target.value = "Save";
    }
  },
  false
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name=test action=greetings.jsp method=POST>
<label for="name">Name:</label><br>
<input type=text id=name /><br>
<label for="surname">Surname:</label><br>
<input type=text id=surname/><br><br>
<input id="btn" type="button" value="Save" />


</form>
</body>
</html>

HTML - Display text after form is submitted

1 Answers1