获取DIV中的所有内容，包括输入选择器的标记值

Question

我正在加载容器div内的html表单。这个html是一个从数据库中检索的模板。然后使用填写表单（或表单的一部分）。

一旦用户完成，他们选择一个调用函数的按钮。

function submitForm() { 
    var workflowID = $('#workFlowID').val(); 
    var formID = $('#formID').val(); 
    var uploadedFiles = $('#uploadedFiles').val(); 
    var htm = $('#formContent').html(); 
    console.log(htm); 
    alert(workflowID + ", " + formID + ", " + uploadedFiles + ", : " + htm); 
} 

的问题是，我得到忠实地再现的形式，但输入字段不包含在最终的“HTM”我需要能够重现HTML，因为它已经被充填到保存到新表。我错过了什么，或者甚至有可能？

已被要求提供更多信息;这里是一个例子，html可能有10个输入区域。一旦适当的输入被填写，表格被保存以供其他人查看并在那里添加。当填写表格时，上面的参考代码会将html减去用户输入的值。

Answer 1

我发现答案的概念是通过每个标签并设置属性。

$("input").each(function() { 
    if ($(this).is(':text')) { $(this).attr("value", $(this).val()); } 
    else if ($(this).is(':checkbox')) { 
     if ($(this).is(':checked')) { 
      $(this).attr('checked', 'checked'); 
     } 
     else { 
      $(this).removeAttr('checked'); 

     } 
     if ($(this).is("textarea")) { 
       $(this).text($(this).val()); 
     } 
     if ($(this).is(':radio')) { 
      if ($(this).is(':checked')) { 
       $(this).attr('checked', 'checked'); 
      } 
      else { 
       $(this).removeAttr('checked'); 

      } 

     } 

那么我可以回去做什么，我试图做开始：

var htm = $('#formContent').html(); 

这将包括在HTML中输入的值。

感谢所有回应并帮助我指出了正确的方向。

Answer 2

我不确定如何评论您的文章与其他人一样，但是您使用服务器端来使用哪种语言来促进此操作？它是C＃，PHP或...

编辑：

我想我以前也有过类似的问题。我所做的是对整个页面（所有html元素和所有内容）的AJAX请求。你会将这些数据返回到一个变量中。你必须通过这个变量来解析你正在寻找的信息。例如，如果你想要一切之间的一切，你可以做一些字符串解析来获得单独的。

我不是说这是一件好事，但它可能是一个可行的解决方案，如果我理解正确。

您可能也可以尝试 http://api.jquery.com/html/ 并将其用于您的窗体或身体的ID。

Answer 3

因此，您在名为“formContent”的表单元素中有一个div，并且您想提取该div内所有输入的值（可能为html），但输入的数量在提交时未知？他们都是textareas吗？

尝试使用jQuery来查找所有适当的区域，但我不确定如何处理这些值。

var value = ""; 
$("#formContent").children("textarea").each(function(){value += $(this).val()}); 

编辑：OP的讨论后，添加更多

所以，我想补充一个数据库表中至少有两列：ElementID和价值。制作一个web服务来检查是否存在ElementID。如果存在，则更新值，否则插入。

使用这些数据来填充表单的值。这可能是服务器端的一个挑战，您可能不得不依靠客户端上的多个调用来获取和填充。

最后，在用户点击提交后，使用我上面显示的类似方法来查找所有输入并执行对web服务的ajax调用，提交元素的id和它的值。类似这样的：

$("#formContent").find("input", "select", "textarea").each(
    function() 
    { 
     var elementId = $(this).attr("id"); 
     var value = $(this).val(); 
     //perform ajax call to webservice with elementId and value parameters 
    } 
); 

请记住，每个elementId都需要是唯一的，这可能会导致多个HTTP请求。否则，您可能希望一次发送一些可解析的数据直到所有数据的web服务并相应地更新。