我将如何回应HTML元素中的选定表单值（如p标签）？

-6

当用户填写表单时，是否有方法在HTML元素中显示/回显表单值？我将如何回应HTML元素中的选定表单值（如p标签）？

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

2012-08-03 gigglebot

是的，与JavaScript和也许或可能不使用AJAX – 2012-08-03 03:56:49

请尝试一些事情后，然后寻求帮助 – Jalpesh 2012-08-03 04:37:16

这是一个简单的例子，您可以如何使用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()

来源

2012-08-03 03:58:20

如果你正在使用PHP和服务器（例如Apache）的配置具有HTML/HTM启用内嵌PHP/xhtml文件，你可以像这样包含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>

来源

2012-08-03 03:59:26

你可以改变处理程序添加到窗体本身 - 单个字段上的更改事件会冒泡（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给你所有的形式co但是你需要添加一些代码来处理复选框和单选按钮，因为你会根据它们的checked属性将它们包含在输出中，而不是在它们的value属性中。正如你所看到的，我只是使用输入元素名称属性作为输出中的标签，但通过使用相关标签元素中的文本（如果有的话），或者添加data-displayName=...属性或其他。但这应该是足够多的让你开始更多...

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

来源

2012-08-03 04:07:30 nnnnnn

您也不妨看看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-03 04:18:16 msanford

我将如何回应HTML元素中的选定表单值（如p标签）？

回答

相关问题