DEV Community

loading...
Cover image for Display html form values in same page after submit using javaScript

Display html form values in same page after submit using javaScript

bingchandler671 profile image bingchandler671 ・1 min read

Method 1

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input").value;
    }
  </script>

  </head>
<body>

  <form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
  </form>

  <input type="submit" onclick="showInput();"><br/>
  <label>Your input: </label>
  <p><span id='display'></span></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Another way you can do that. Point to be noted input type is button

<input type="button" onclick="showMessage()" value="submit" />

Follow this code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML JavaScript output on same page</title>
    <script type="text/JavaScript">
        function showMessage(){
            var message = document.getElementById("message").value;
            display_message.innerHTML= message;
        }
    </script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

MEthod 3

Read more

Discussion

pic
Editor guide