Question

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

有没有办法可以收集重复文本字段ID（描述）中的所有信息，并将它们显示在一个div中？例如，如果用户键入第一行 - “堆栈”，并在第二行重复行“溢出”./用户应该看到：

堆栈
溢出

（忽略子弹）在特定的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中，每个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位于已加载的页面中

Answer 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>');
});

Answer 2

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

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

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

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

2 个答案: