Question

当用户填写表单时，有没有办法在HTML元素中显示/回显表单值？

我正在创建一个巨大的搜索表单，并希望通过提交按钮添加一个有用的区域，提醒用户他们将要搜索的内容。

Answer 1

这是一个简单的例子，说明如何使用jQuery复制表单输入的值。

$('input[name=query]').keyup(function() {
    $('#query-term').text($(this).val());
});

$('select[name=category]').change(function() {
    $('#query-category').text($(this).val());
}).change();

Demo on jsFiddle。以下是我使用的jQuery函数列表。

$()相当于jQuery()
keyup()
val()
text()

Answer 2

如果你使用的是php和服务器（例如apache）配置在html / htm / xhtml文件中启用了内联php，你可以像这样包含php：

<..>
<form>
<input>
<?php
echo 'test'
?>
</form>
<..>

同样可以放入文件.php中.htm并且可以工作，因为很可能你的服务器只能为.php文件进行php解析。

现在，如果您只想显示用户在页面顶部的某个字段中输入的表单字段值，那么您可能希望这样：

<form>
<input id="search" value="test" onkeypress="$('#search_field_test').text($(this).val())" >
<..>
<span id="search_field_test">
</form>

Answer 3

你可以为表单本身添加一个更改处理程序 - 各个字段的更改事件将冒泡（jQuery确保这一点，即使它不会在旧IE中自然发生） - 然后获取所有非空值并将它们放在“有用区域”元素中：

$(document).ready(function() {
    var $form = $("#yourFormIdHere"),
        $formFields = $form.find(":input"),
        $helpfulArea = $("#yourOutputElement");

    $form.change(function(e) {
        $helpfulArea.empty();
        $formFields.each(function() {
            if (this.value != "")
                $helpfulArea.append(this.name + ": " + this.value + "<br/>");
        });
    });
});

:input selector为您提供了所有表单控件，但您需要添加一些代码来处理复选框和单选按钮，因为您根据其checked属性将它们包含在输出中，不在他们的value财产上。正如您所看到的，我只是将输入元素名称属性用作输出中的标签，但您可以通过使用关联标签元素中的文本（如果有）来实现这一点，或者添加{{1}属性或其他什么。但这应该足以让你开始......

演示：http://jsfiddle.net/nnnnnn/3VB6G/

Answer 4

您可能还希望查看AngularJS，这样您就可以执行以下操作：

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

如何在HTML元素（如p标签）中回显选定的表单值？

4 个答案: