Question

我有一个包含4个输入字段的输入表单。两个是下拉列表，两个是文本字段。当用户填写字段并单击旁边的+按钮时，在下面的文本区域中将复制所有值，并清除4个输入字段。

四个输入字段是：

   <select class="small-field"  name="type" id="type" >
         <option>Laptop</option>
         <option>Desktop</option>
         <option>Printer</option>
   </select>
   <select class="small-field"  name="brand" id="model" >
        <option>HP</option>
        <option>Dell</option>
        <option>Advantech</option>
   </select>
   <input class="small-field" type="text" id="model" name="model" placeholder="model">
   <input type="text" id="qty" name="quantity" placeholder="qty." style="width: 50px">
   <input type="button"  id="addthis" style="width: 30px" value="+" class="button">

，文本区域如下 -

<textarea name="details" id="details"></textarea>

我为此编写的脚本是

$(function() {                                    
    $("#addthis").onclick(function('#type') {                
        $('#details').val(this.value);                       
    });
    $("#addthis").onclick(function('#brand') {                
        $('#details').val(this.value);                       
    });
    $("#addthis").onclick(function('#model') {                
        $('#details').val(this.value);                       
    });
    $("#addthis").onclick(function('#qty') {                
        $('#details').val(this.value);                       
    });
});

textarea中的最终输出将如下 -

Type: Laptop , Brand: HP, Model: CQ4587, Qty: 5
Type: Laptop , Brand: Dell, Model: CQ4587, Qty: 3
Type: Laptop , Brand: HP, Model: CQ4587, Qty: 2
Type: Desktop , Brand: HP, Model: CQ4587, Qty: 7

Answer 1

我已经编辑了您的代码，更改了一些ID并更改了脚本。你有一些具有相同身份的元素。

<select class="small-field"  name="type" id="type" >
  <option>Laptop</option>
  <option>Desktop</option>
  <option>Printer</option>
</select>
<select class="small-field"  name="brand" id="model" >
  <option>HP</option>
  <option>Dell</option>
  <option>Advantech</option>
</select>
<input class="small-field" type="text" id="model_value" name="model" placeholder="model">
<input type="text" id="qty" name="quantity" placeholder="qty." style="width: 50px">
<input type="button"  id="addthis" style="width: 30px" value="+" class="button">
<textarea name="details" id="details"></textarea>

在脚本中，我获得了每个输入的值并显示在textarea中。脚本将是

<script>
$("#addthis").click(function(){
  $("#details").val(
     $("#details").val() +
     "Type: "+$("#type").val() + 
      " , Brand: "+$("#model").val() +
      ", Model: "+$("#model_value").val() +
      ", Qty: "+$("#qty").val() +"\n"
  );
});
</script>

http://jsfiddle.net/uwgnx2sw/1/

我希望它有所帮助。

Answer 2

为了确保连接值（以及保留所有先前输入的值），我已将HTML修改为以下内容（使用<fieldset>将相关项目组合在一起，并删除{用于验证目的的各种子代的{1}}属性：

id

和jQuery：

<fieldset class="details">
  <select class="small-field" name="type">
    <option>Laptop</option>
    <option>Desktop</option>
    <option>Printer</option>
  </select>
  <select class="small-field" name="brand">
    <option>HP</option>
    <option>Dell</option>
    <option>Advantech</option>
  </select>
  <input class="small-field" type="text" name="model" placeholder="model">
  <input type="text" name="quantity" placeholder="qty." style="width: 50px">
</fieldset>
<input type="button" style="width: 30px" value="+" class="button">
<textarea name="details" id="details"></textarea>

// binding the click event-handler to the '#addthis' element:
$('#addthis').on('click', function() {
  // creating a reference to all <fieldset class="details"> elements:
  var fieldsets = $('fieldset.details'),
    // getting the last of those <fieldset> elements:
    last = fieldsets.last();

  // hiding the last one,
  last.hide()
      // cloning it:
     .clone()
     // looking to its child-elements' value property:
     .children().prop('value', function(i, v) {
        // setting the value to the assigned default-value:
        return this.defaultValue;
  })
    // moving back to the previous selection, the cloned-<fieldset>:
    .end()
    // inserting the clone before the button:
    .insertBefore(this)
    // showing the cloned <fieldset>:
    .show();

  // setting the value of the #details element:
  $('#details').val(function() {
    // creating a map of:
    return fieldsets.map(function() {
      // ...a map of the children of each of the <fieldset> elements' children:
      return $(this).children().map(function() {
        // a string of the name, ': ' and values:
        return this.name + ': ' + this.value;
      // joining that together into an array, joined by ', ':
      }).get().join(', ');
    // joining those arrays together with newlines:
    }).get().join('\n');
  });
});

$('#addthis').on('click', function() {
  var fieldsets = $('fieldset.details'),
    last = fieldsets.last();
  last.hide().clone().children().prop('value', function(i, v) {
    return this.defaultValue;
  }).end().insertBefore(this).show();
  $('#details').val(function() {
    return fieldsets.map(function() {
      return $(this).children().map(function() {
        return this.name + ': ' + this.value;
      }).get().join(', ');
    }).get().join('\n');
  });
});

textarea {
  display: block;
  width: 90%;
}

参考文献：

JavaScript的：
- Array.prototype.join()。
jQuery的：
- get()。
- children()。
- end()。
- hide()。
- insertBefore()。
- map()。
- prop()。
- show()。
- val()。

通过按钮单击从输入字段动态向textarea添加值

2 个答案: