CODEWITHSUNDEEP
javascripthtml
Noob Programmer
Noob Programmer

Reputation: 41

How do you print user input in html using javascript?

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>

Upvotes: 0

Views: 45147

Answers (5)

SURYA
SURYA

Reputation: 1

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>

Upvotes: 0

Chris
Chris

Reputation: 59511

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>

Upvotes: 7

rdarioduarte
rdarioduarte

Reputation: 1999

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>

Upvotes: 0

abhay vyas
abhay vyas

Reputation: 146

  <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

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

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>

Upvotes: 0

Related Questions