在一个 div Jquery/Javascript 的新行中显示多个输入值答案

【问题标题】：Display multiple input values each in a new line in one div Jquery/Javascript在一个 div Jquery/Javascript 的新行中显示多个输入值
【发布时间】：2012-01-27 17:12:20
【问题描述】：

我正在制作一个表单，用户可以在其中输入许多描述，然后查看他\她输入的所有详细信息。我正在使用重复区域来收集这些描述（在带有 id 描述的 texfield 中），我希望用户能够在打印/保存之前预览他们提供的信息

有没有一种方法可以收集重复文本字段 id(description) 中的所有信息，并在它们出现时将它们显示在一个 div 中？例如，如果用户在第一行输入 - “Stack”，在第二行重复输入“Overflow”。/ 用户应该看到：

堆栈
溢出

（忽略项目符号）在特定的 divtag 中。基本上我需要获取所有带有 Id 描述的输入，并在 div 的新行中显示它们中的每一个。

非常感谢所有帮助

编辑：这是HTML代码

 <tr>
    <td><label for="description"></label>
      <textarea name="description" cols="35" rows="2" id="description"></textarea></td>
    <td><label for="accountcodes"></label>
      <input type="text" style="text-transform:uppercase;" name="accountcodes" id="accountcodes"></td>
    <td width="10" align="center">T1
      <label for="T1"></label>
      <input name="T1" type="text" class="tcodes" id="T1" size="10"></td>
    <td width="10" align="center">T2
      <label for="T2"></label>
      <input name="T2" type="text" class="tcodes" id="T2" size="10"></td>
    <td width="20" align="center">T3
      <label for="T3"></label>
      <input name="T3" type="text" class="tcodes" id="T3" size="15"></td>
    <td width="10" align="center">T4
      <label for="T4"></label>
      <input name="T4" type="text" class="tcodes" id="T4" size="10"></td>
    <td width="10" align="center">T5
      <label for="T5"></label>
      <input name="T5" type="text" class="tcodes" id="T5" size="10"></td>
    <td width="10" align="center">T6
      <label for="T6"></label>
      <input name="T6" type="text" class="tcodes" id="T6" size="10"></td>
    <td width="10" align="center">T8
      <label for="T8"></label>
      <input name="T8" type="text" class="tcodes" id="T8" size="10"></td>
    <td><label for="amount"></label>
      <input name="amount" type="text" id="amount" size="10"></td>
    <td><a id="deletedesc" style="font-size:12px; color:#FF0000;" href="#delete">Delete</a></td>
  </tr>

只需将所有带有 ID 描述的输入显示在一个 div 中，每个输入都在一个新行中。以上是我正在克隆的HTML代码

新编辑

使用来自 Ninja 的一些代码，我想出了这个 jquery 代码，但我必须使用警报才能让它工作，它仅适用于 Firefox

$("#preview").click(function(){
    var description = '';
    var accountcodes='';
    $("#loadpage").show();
    $("#loadpage").load("pvpreview.php");
    //append all descriptions   
    $("#descriptiontable #description").each(function() 
    {
     description = $(this).val(); 
     //alert(description)
     $("#prevdescription").append('<p>' + description + '</p>');
}); 
    //append all account codes
    $("#descriptiontable #accountcodes").each(function() 
    { 
     accountcodes = $(this).val();  
     $("#prevaccountcodes").appendTo('<p>' + accountcodes + '</p>');
}); 


    });

请注意，我正在附加到正在加载的页面。 #prevdescription 和 #prevacountcodes 在加载的页面中

【问题讨论】：

一些 html 会有所帮助。另外，尽量避免使用相同 id 的多个元素
请提供行的htmt
@ori 是同一个 ID，因为我正在克隆表格行
我应该使用 .find 函数和 .each 函数然后将它们显示在 div 中吗？
@Max：请记住将答案标记为正确。

标签： javascript jquery html

【解决方案1】：

给出多个具有相同 id 的输入元素是不正确的。改用类。假设您的输入元素是：

<input class="myClass" type="text" id="1">
<input class="myClass" type="text" id="2"> 
<div id="output"></div>

你可以使用 jquery .each():

$(".myClass").each(function() {
    description = $(this).val();
    $("#output").append('<p>' + description + '</p>');
});

【讨论】：

我必须使用警报才能看到结果，但我不知道为什么
它们出现然后立即消失

【解决方案2】：

多个元素具有相同的 id 是无效的 HTML，并且当您通过 id 选择时不会获得所有元素：$('#ID')。你只会得到第一个。

您可以给输入元素一个类然后查询$('.CLASS')，或者使用输入的名称属性$('input[name="NAME"]')。

loop over the elements，并将值附加到您的容器中——不要忘记先清空容器。

【讨论】：