-7

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

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

4

4 回答 4

2

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

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

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

jsFiddle 上的演示。这是我使用的 jQuery 函数的列表。

  1. $()相当于jQuery()
  2. 键（）
  3. 值（）
  4. 文本（）
于 2012-08-03T03:58:20.610 回答
1

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

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

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

现在，如果您只想显示用户在页面顶部的某个字段中输入的表单字段值，也许您想要这个：

<form>
<input id="search" value="test" onkeypress="$('#search_field_test').text($(this).val())" >
<..>
<span id="search_field_test">
</form>
于 2012-08-03T03:59:26.227 回答
0

您可能还希望查看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>
于 2012-08-03T04:18:16.803 回答
0

您可以将更改处理程序添加到表单本身 - 各个字段上的更改事件会冒泡（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器为您提供所有表单控件，但您需要添加一些代码来以不同方式处理复选框和单选按钮，因为您将根据它们的checked属性而不是它们的value属性将它们包含在输出中。如您所见，我只是将输入元素名称属性用作输出中的标签，但您可以通过使用关联标签元素（如果有）中的文本来美化这一点，或者添加一个data-displayName=...属性或其他任何东西。但这应该足以让你开始......

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

于 2012-08-03T04:07:30.303 回答