如何将完整的 DOM 表单复制到文本字段中并使用 jquery 发送答案

【问题标题】：How to copy a complete DOM Form into a textfield and send it with jquery如何将完整的 DOM 表单复制到文本字段中并使用 jquery 发送
【发布时间】：2017-10-31 23:08:52
【问题描述】：

我有一个包含许多广告的列表。每个广告都具有相同的类，如下例所示：

<div class="ad1-wpr">...some code...</div>
<div class="ad1-wpr">...some code...</div>
<div class="ad1-wpr">...some code...</div>
and so on...

所有的div都一样，只是img、title、wag和ver2不同：

<div class="ad1-wpr">
 <img>link to img</img>
 <div class="title">Title</div>
 <select name="wag">
            <option>1</option>
            <option>2</option>
 </select>
 <input name="res" id="ver2" value="">
 <button type="button" id="selad" class="button">Send Form</button>
</div>

现在，当单击 selad 按钮时，我需要来自最近广告的广告 DOM，其中包含来自用户的选定和填充数据，将其复制到名为“finish-text”的文本字段并发送表单。

我的问题是，当我克隆 DOM 时，我没有选择和填充数据，并且在“完成文本”中没有要发送的文本：

$(function(){
$('#selad').click(function() {

    var $text = $('.ad1-wpr').clone();
    $('.finish-text').html($text);

});});

更新：现在我有了提取选择框和输入数据的解决方案（感谢@AthMav）：

    myFunc = function(el){

  var parent = $(el).parent();
  var selectValue = parent.find("select").val();
  var inputValue = parent.find("input").val();

  $(".finish-text").val(selectValue + ", " + inputValue);


}

如何从“ad1-wpr”中提取 DOM 并将其粘贴到“finish-text”字段中并使用上面的值？谢谢！

【问题讨论】：

你能告诉我们你尝试了什么吗？
@AthMav - 编辑后

标签： jquery html dom copy clone

【解决方案1】：

myFunc = function(el){

  var parent = $(el).parent();
  var selectValue = parent.find("select").val()
        
  $(".finish-text").val(selectValue);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad1-wpr">
  <select name="wag">
    <option value="first">first</option>
    <option value="second">second</option>
  </select>
  <button onclick=myFunc(this)>Send Form</button>
</div>

可能是你想要的这样的东西？不过，在标记中正确绑定按钮的点击事件而不是 onclick 可能是明智之举。

【讨论】：