JQuery 将表单元素替换为文本

JQuery replacing form elements with text

本文关键字：文本 替换 元素 表单 JQuery      更新时间：2023-09-26

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

例如，表单可能具有名称字段和电子邮件字段。我将用详细信息填写表单，然后当我单击导出为文本时，我需要以文本格式获取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

我无法获取表单值。

有什么建议吗？

更新：

序列化未按预期工作。上面是一个小例子。表单非常复杂，我需要直观地将表单值呈现为其标签。

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

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

它将为您提供类似于

名称=约翰&x=y

使用 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>

使用 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&LastName=tina%40yopmail.com

相关文章：