在这里，点击运行代码片段，它在这里工作

Question

如何打印用户输入？每次我点击提交按钮，它只会将我重定向到空白页面。这是代码：

    <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>

Answer 1

目前还不完全清楚你想要什么，但试试这个：

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>

Answer 2

如果您想留在当前页面，则不应使用提交。通过使用带有点击监听器的按钮，可以轻松实现客户端打印。

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>

Answer 3

  <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>

使用angularjs而不是javascript轻松打印

Answer 4

首先，如果您只想打印用户输入，则不应该使用表单，根据我对您的问题的理解，我可以建议一些像这样的代码，BTW那里有一些非常好的Javascript库可以做什么你想做的没有任何麻烦，比如淘汰赛。

在这里，点击运行代码片段，它在这里工作

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>

Answer 5

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>

如何使用javascript在html中打印用户输入？

5 个答案:

在这里，点击运行代码片段，它在这里工作