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用文本替換表單元素

回答

相關問題