Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
1.44/5 (2 votes)
See more:
i want full html,javascript code for displaying form data on same page

What I have tried:



<title>Test Input

function testVariable() {
var strText = document.getElementById("textone");
document.write(strText.value);
var strText1 = document.getElementById("textTWO");
document.write(strText1.value);
}







Posted
Updated 2-Nov-21 4:44am
v2

Code,
<!DOCTYPE html>
<html>
<head>
    <script>
        function testVariable() {
            var strText = document.getElementById("textone").value;          
            var strText1 = document.getElementById("textTWO").value;
            var result = strText + ' ' + strText1;
            document.getElementById('spanResult').textContent = result;
             
        }
    </script>
</head>
<body> 
    <input type="text" id="textone" />
    <input type="text" id="textTWO" />
    <button  onclick="testVariable()">Submit</button> <br />
    <span id="spanResult">

    </span>
   
     
</body>
</html>
 
Share this answer
 
Don't use document.write. If you want to add content to a page you need to work with the DOM. Google "create div javascript" or "create span javascript" for examples, you basically need to create an element that has your text in it and add that element to the part of the page you want the text to display.

Alternatively have the div\span you want the text to appear at already on the page and just update it

document.getElementById("myDiv").innerHTML = strText.value;
 
Share this answer
 
Comments
confusedtushar 1-Mar-18 5:18am    
can you please show me full working code?
<form name="frm">
     <input name="name" type="text" id="name" placeholder="Enter Your Name" required>
 
<input name="number" id="number" type="text" pattern="[789][0-9]{9}" placeholder="Enter Your Mobile Number" required>  

  <button style="font-size: 22px;" value="submit" onClick="myFunction()" type="submit">Submit</button>
    
            <div id="popcode"></div>
          </form>


function myFunction() {
var a,b,currdate,d,n;
a= document.frm.text.value;
b=a.substring(0,2);
var currdate = new Date();

var currdate= currdate.getDate() + '' + (currdate.getMonth()+ 1) + '' + String(currdate.getFullYear()).substr(2);
var d = new Date();
var n = d.getSeconds();
document.getElementById("popcode").innerHTML =b+currdate+n;

}
 
Share this answer
 
v3
Comments
CHill60 13-Jul-18 8:58am    
OP said "data" not "date"
HTML
<pre><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function testVariable() {
            debugger
            var strText = document.getElementById("txtName").value;
            var strText1 = document.getElementById("txtEmail").value;
            document.getElementById("p1").innerHTML = strText;
            document.getElementById("p2").innerHTML = strText1;

        }
    </script>
</head>

<body>
    <form>

        <input type="text" name="Name" id="txtName" placeholder="Name">
        <input type="text" name="Email" id="txtEmail" placeholder="Email">
        <input type="button" value="Submit" id="btnSubmit" onclick="testVariable()">
    </form>
    <div>
        <p id="p1"></p>
        <p id="p2"></p>
    </div>
</body>

</html>
 
Share this answer
 
<!DOCTYPE html>

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

  


  <form>
    <label>Enter a Message</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>
 
Share this answer
 
Comments
CHill60 3-Nov-21 5:58am    
An uncommented code dump is not a good solution
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <center>
        <form>
            <h4>Registration Form</h4>
            <!-- Input from User -->
            <input type="text" placeholder='Name' id="name"><br>
            <input type="email" placeholder='Email' id="email"><br>
            <input id='btn' type="submit" placeholder='Register' onclick="register(event)">
        </form>
        <!-- Output Form Details -->
        <p>Name: <span id="display_name"></span></p>
        <p>Email: <span id="display_email"></span></p>
    </center>
    <script>
    const register = function (event) {
    // Receive user input
    let r_name = document.querySelector("#name").value;
    let r_email = document.querySelector("#email").value;
    // Output on page
    display_name.innerHTML = r_name;
    display_email.innerHTML = r_email;
    event.preventDefault();
    };
    </script>
</body>
</html>
 
Share this answer
 
Comments
CHill60 3-Nov-21 5:58am    
An uncommented code dump is not a good solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900