Question

我处于这种情况，我需要在提交之前将表单填写的数据转换为文本。

例如，表单可能包含名称字段和电子邮件字段。我将在表单中填写详细信息，然后当我单击导出为文本时，我需要以文本格式获取html的内容

name = <input type="text" name="name" /> <!-- user enters "john" -->
email = <input type="text" name="email" /> <!-- user enters a@b.com -->

当我导出时我需要

name = john
email = a@b.com

目前，我正在使用此代码进行转换。但问题是，一旦我转换，我无法恢复到以前的状态。

$("#btn").click(function(){
   $('.replace').replaceWith(function(){
       return this.value
    });
});

所以，我想的是，我将在div标签中显示输出。但是，如果我尝试

document.getelementByID("parentdiv").value

我无法获取表单值。

有什么建议吗？

更新

序列化不能按预期工作。以上是一个小例子。表单非常复杂，我需要在视觉上将表单值呈现给其标签。

Answer 1

$x = $('form').serialize();

这将为您提供一系列您可以轻松使用的元素和值，它可以用作JSON，但是出于预期目的，它应该相当容易摆弄。

它会给你一个类似于

的输出

名称=约翰＆安培; X = Y

Answer 2

使用serializeArray()尝试这样做：

$("#btn").click(function(){
		var x = $('form').serializeArray();
		console.log(x);
		var str="";
		$.each(x, function( index, val ) {
			 str=str+val.name+":"+val.value+"<br>";
			});
	    $('#textFrom').html(str);
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 name =<input type="text" name="name" /> <!--user enters "john"-->
email =<input type="text" name="email" /> <!--//user enters a@b.com-->
</form>
<button id="btn">click</button>
<div id="textFrom"></div>

Answer 3

使用jQuery序列化功能：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="">
Name: <input type="text" name="name" value="Tina" /><br>
Email: <input type="text" name="LastName" value="tina@yopmail.com" /><br>
</form>
<button>Export Values</button>
<div></div>
</body>
</html>

输出将是：name = Tina＆amp; LastName = tina％40yopmail.com

JQuery用文本替换表单元素

3 个答案: