13

我有一个 HTML 表单，我需要在用户单击提交按钮后在表单下方显示表单字段值。如何使用 HTML 和 JavaScript Ajax 做到这一点？

4

7 回答 7

28

这是一种方法。

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

这就是运行时的样子。干杯。

在此处输入图像描述

于 2014-07-16T12:33:00.687 回答
8

另一种方法（如果您使用表单），请注意输入类型是按钮

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

完整代码为：

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

但是即使没有表格你也可以做到：

<!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>
Enter message: <input type="text" id = "message">
<input type="submit" onclick="showMessage()" value="submit" />
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>

在这里您可以使用提交或按钮：

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

无需设置

return false;

这两个示例都不是来自 JavaScript 函数。

于 2016-07-09T19:04:00.940 回答
2

这行得通。

<html>
<head>
<script type = "text/javascript">
function write_below(form)
{
var input = document.forms.write.input_to_write.value;
document.getElementById('write_here').innerHTML="Your input was:"+input;
return false;
}
</script>
</head>

<!--Insert more code here-->
<body>
<form name='write' onsubmit='return write_below(this);'>
<input type = "text" name='input_to_write'>
<input type = "button" value = "submit" />
</form>
<div id='write_here'></div></body>
</html>

从函数返回 false 永远不会将其发布到其他页面，但会编辑 html 内容。

于 2013-03-16T10:28:02.470 回答
1 

var tasks = [];
var descs = [];

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
var rowCount = 1;

function addTasks() {
  var temp = 'style .fa fa-trash';
  tasks.push(document.getElementById("taskname").value);
  descs.push(document.getElementById("taskdesc").value);
  var table = document.getElementById("tasksTable");
  var row = table.insertRow(rowCount);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  cell1.innerHTML = tasks[rowCount - 1];
  cell2.innerHTML = descs[rowCount - 1];
  cell3.innerHTML = getDate();
  cell4.innerHTML = '<td class="fa fa-trash"></td>';
  rowCount++;
  modal.style.display = "none";
}


function getDate() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!

  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }
  var today = dd + '-' + mm + '-' + yyyy.toString().slice(2);
  return today;
}
<html>

<body>
  <!-- Trigger/Open The Modal -->
  <div style="background-color:#0F0F8C ;height:45px">
    <h2 style="color: white">LOGO</h2>
  </div>
  <div>
    <button id="myBtn">&emsp;+ Add Task &emsp;</button>
  </div>
  <div>
    <table id="tasksTable">
      <thead>
        <tr style="background-color:rgba(201, 196, 196, 0.86)">
          <th style="width: 150px;">Name</th>
          <th style="width: 250px;">Desc</th>
          <th style="width: 120px">Date</th>
          <th style="width: 120px class=fa fa-trash"></th>
        </tr>

      </thead>
      <tbody></tbody>
    </table>
  </div>
  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">

      <div class="modal-header">

        <span class="close">&times;</span>
        <h3> Add Task</h3>
      </div>

      <div class="modal-body">
        <table style="padding: 28px 50px">
          <tr>
            <td style="width:150px">Name:</td>
            <td><input type="text" name="name" id="taskname" style="width: -webkit-fill-available"></td>
          </tr>
          <tr>
            <td>
              Desc:
            </td>
            <td>
              <textarea name="desc" id="taskdesc" cols="60" rows="10"></textarea>
            </td>
          </tr>
        </table>
      </div>

      <div class="modal-footer">
        <button type="submit" value="submit" style="float: right;" onclick="addTasks()">SUBMIT</button>
        <br>
        <br>
        <br>
      </div>

    </div>
  </div>



</body>

</html>

于 2017-10-09T10:03:16.633 回答
0 
<script type = "text/javascript">
function get_values(input_id)
{
var input = document.getElementById(input_id).value;
document.write(input);
}
</script>

<!--Insert more code here-->


<input type = "text" id = "textfield">
<input type = "button" onclick = "get('textfield')" value = "submit">

下次您在这里提出问题时，请提供更多详细信息以及您尝试过的内容。

于 2013-03-16T10:03:47.843 回答
-1

试试这个：

onsubmit="return f(this.'yourfieldname'.value);"

我希望这能帮到您。

于 2013-03-16T10:02:32.323 回答
-1

使用 JS 和 html 代码单击提交按钮后，在同一页面中显示 html 表单值。再次打开它后，它应该在该页面中给出该评论。

于 2016-01-29T07:05:57.487 回答