How do you print user input in html using javascript?

Question

How to print the user input? Everytime I click on the submit button, it just redirects me to a blank page. Here's the code:

    <html>
<head>
    <title>NameTest</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form action="PayslipServlet" method="get">

        Last name:    <input type="text" name="lname" id="lname"><br/>
        First name:   <input type="text" name="fname" id="fname"><br/>
        Middle name:  <input type="text" name="mname" id ="mname"><br/>
        Name:<script>document.write(document.getElementById('fname').value+" "+document.getElementById('mname').value+""+document.getElementById('lname').value);</script>
        <input type="submit" value="Submit">
    </form>
</body>

Print it how? Print it where? Print it when? Have a look at other questions... we need a lot more info in order to help you without guessing — StudioTime
– StudioTime, Commented Feb 2, 2016 at 13:12
Possible duplicate of JavaScript/HTML: How to display user input into html body? — Sandesh
– Sandesh, Commented Feb 2, 2016 at 13:20

Chris · Accepted Answer · 2016-02-02 13:26:50Z

7

It's not entirely clear what you want, but try this:

Jsfiddle Demo

        <form action="PayslipServlet" method="get">
          Last name:    <input type="text" name="lname" id="lname"><br/>
          First name:   <input type="text" name="fname" id="fname"><br/>
          Middle name:  <input type="text" name="mname" id ="mname"><br/>
          Name: <span id="result"></span>
          <br>
          <input type="button" value="Submit" onClick="pr()">
        </form>

        <script>
          function pr() {
            document.getElementById("result").innerHTML = document.getElementById('fname').value + " " + document.getElementById('mname').value + " " + document.getElementById('lname').value;
          }
        </script>

edited Feb 2, 2016 at 13:26

answered Feb 2, 2016 at 13:20

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Polywhirl · Accepted Answer · 2016-02-02 13:19:22Z

You should not use submit, if you want to stay on the current page. Client side printing can be easily achieved by using a button with a click listener.

window.writeValues = function(form) {
  var fname = form.fname.value;
  var mname = form.mname.value;
  var lname = form.lname.value;

  document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<form action="PayslipServlet" method="get">
  Last name: <input type="text" name="lname" id="lname"><br/>
  First name: <input type="text" name="fname" id="fname"><br/>
  Middle name: <input type="text" name="mname" id="mname"><br/>
  Name: <span id="fullname"></span><br />
  <input type="button" value="Submit" onClick="writeValues(form)">
</form>

abhay vyas · Accepted Answer · 2016-02-02 13:20:22Z

0

  <html>
<head>
    <title>NameTest</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form action="PayslipServlet" method="get">
        <div ng-app="">
        Last name:    <input type="text" name="lname" ng-model="lname" id="lname"><br/>
        First name:   <input type="text" name="fname" ng-model="fname" id="fname"><br/>
        Middle name:  <input type="text" name="mname" ng-model="mname" id ="mname"><br/>
        full Name: {{lname}}&nbsp;{{fname}}&nbsp;{{mname}}<br/>
        <input type="submit" value="Submit">
        </div>
    </form>
</body>

print easily with angularjs instead of javascript

answered Feb 2, 2016 at 13:20

abhay vyas

1462 bronze badges

1 Comment

Chris Over a year ago

It doesn't seem he's interested in using a framework as he didn't specify any one, so you should assume vanilla javascript

rdarioduarte · Accepted Answer · 2016-02-02 13:26:31Z

First of all, you should't be using a form if you just want to print your user input, as per my understanding of your question I can suggest some code like these, BTW there some really good Javascript libraries that do what you want to do it without any troubles, like knockout.

Here it goes, Click on run Code Snippet, it works here

var el = document.getElementById("showName");
el.addEventListener("click", formatName, false);

function formatName () {
  var name = document.getElementById('fname').value;
  var mname = document.getElementById('mname').value;
  var lastname = document.getElementById('lname').value;

  document.getElementById('fullName').innerHTML = name + " " + mname + " " + lastname; 
}

<form action="PayslipServlet" method="get">
  Last name:    <input type="text" name="lname" id="lname"><br/>
  First name:   <input type="text" name="fname" id="fname"><br/>
  Middle name:  <input type="text" name="mname" id ="mname"><br/>
  Name: <span id="fullName"></span>
  <input id="showName" type="button" value="Submit" />
</form>

SURYA · Accepted Answer · 2017-08-22 12:24:20Z

0

window.writeValues = function(form) {
  var fname = form.fname.value;
  var mname = form.mname.value;
  var lname = form.lname.value;

  document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<form action="PayslipServlet" method="get">
  Last name: <input type="text" name="lname" id="lname"><br/>
  First name: <input type="text" name="fname" id="fname"><br/>
  Middle name: <input type="text" name="mname" id="mname"><br/>
  Name: <span id="fullname"></span><br />
  <input type="button" value="Submit" onClick="writeValues(form)">
</form>

answered Aug 22, 2017 at 12:24

SURYA

1

Collectives™ on Stack Overflow

How do you print user input in html using javascript?

5 Answers 5

Comments

Comments

1 Comment

Here it goes, Click on run Code Snippet, it works here

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Here it goes, Click on run Code Snippet, it works here

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related