JQuery用文本替换表单元素

我处于这种情况，我需要在提交前将表单填充数据转换为文本。JQuery用文本替换表单元素

就像例如，表单可能有一个名称字段和一个电子邮件字段。我将会填写表格与细节，然后当我点击导出为文本，我需要得到HTML的内容以文本格式

name = <input type="text" name="name" /> <!-- user enters "john" --> 
email = <input type="text" name="email" /> <!-- user enters [email protected] -->

当我出口我需要

name = john 
email = [email protected]

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

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

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

document.getelementByID("parentdiv").value

我无法获取表单值。

有什么建议吗？

更新：如预期

连载不能正常工作。以上是一个小例子。表单非常复杂，我需要将表单值直观地呈现给它的标签。

来源

2015-01-06 Bala

值已经是字符串/文本？ – devqon

你会考虑['.serialize（）']（http://api.jquery.com/serialize/）吗？ – Spokey

我没有使用提交表单，我正在使用它来生成一些内容。 – Bala

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

这会给你的元素和值，你可以很容易地一起工作的字符串，它旨在为JSON然而，根据您的用途应该是相当容易摆弄使用。

它会给你使用serializeArray()类似

名称=约翰& X = Y

来源

2015-01-06 13:09:26

即将提及不是一个数组，但如果你确实想要一个数组使用[.serializeArray（）]（http://api.jquery.com/serializearray/） – Spokey

是的，我的不好，修正:) –

输出尝试这样的：

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

<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 [email protected]> 
 
</form> 
 
<button id="btn">click</button> 
 
<div id="textFrom"></div>

来源

2015-01-06 13:30:43

谢谢，它是有益的。但是表单有150多个元素，我将不得不再次使用另一组代码进行渲染。但是较早的方法使我能够灵活地查看表单是否被正确填充。 :( – Bala

然后尝试使用JSON.stringify或JSON.parse.it可以帮助。但上面的答案不会那么慢。 –

使用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="[email protected]" /><br> 
</form> 
<button>Export Values</button> 
<div></div> 
</body> 
</html>

输出将是：名称=蒂娜&姓氏=蒂娜％40yopmail.com

来源

2015-01-06 13:32:00 Mohini

JQuery用文本替换表单元素

回答

相关问题