將表單轉換爲純文本

我有一個頁面根據用戶選擇生成表單。我想知道是否有辦法將表單轉換爲純文本？防爆。該表格有4個字段，每個字段都有一個標籤。我想採取所有的標籤/字段，並按如下方式將它們打印到用戶：將表單轉換爲純文本

label1 field1 
label2 field2 
label3 field3 
label4 field4

有沒有辦法做到這一點？

來源

2012-01-01 sikas

您必須爲此使用客戶端腳本，最好是jQuery。這與你的情況有關嗎？ – 2012-01-01 10:57:05

是的，有。你在做什麼標記？你有什麼嘗試？你做了什麼研究？你有沒有把我們合作的[JS小提琴演示]（http://jsfiddle.net/）放在一起？ – 2012-01-01 10:57:34

@Shadow Wizard：是的，這是可以接受的。 – sikas 2012-01-01 10:57:39

可以使用jQuery來生成基本輸出，例如：

var texts = []; 
$("form label").each(function() { 
    var oLabel = $(this); 
    var oInput = oLabel.next(); 
    texts.push(oLabel.text() + " - " + oInput.val()); 
}); 
var plainText = texts.join("<br />"); 
$("#Output").html(plainText);

這將遍歷所有形式的標籤，然後取這是輸入每個標籤的下一個元素。

Live test case。

來源

2012-01-01 11:07:03

這正是我想要的。但是，我需要鏈接和JS文件以使JQuery可用嗎？ – sikas 2012-01-01 11:11:31

@sikas是的，你需要引用一個單一的文件，可以找到最新版本[這裏]（http://code.jquery.com/jquery-latest.min.js） - 將文件本地複製到你自己的服務器，或直接鏈接到該文件，例如'' – 2012-01-01 11:15:37

託管版本更可靠的來源（因爲我不太確定關於jQuery使用其託管版本的立場）將是[Google的託管庫]（http://code.google.com/apis/libraries/devguide.html#jquery）。 – Purag 2012-01-01 11:21:28

您可以使用

var label1 = getElementById("id").name

創建格式化字符串作爲要顯示在用戶和顯示所有的值與

document.write(string);

來源

2012-01-01 10:59:34 Shraddha

你能舉個例子嗎？ – sikas 2012-01-01 11:00:41

如果你不得到的標籤，並在JavaScript字段中的值不介意使用PHP的額外文件。

你需要做一個小的PHP文件呼應的所有形式的信息是這樣的：

<?php 
$label1 = "label1"; 
$label2 = "label2"; //Set all labels here 
$label3 = "label3"; 
$label4 = "label4"; 
echo $label1 . " " . $_POST['field1'] . "<br />"; //Change to get depending on your method. 
echo $label2 . " " . $_POST['field2'] . "<br />"; 
echo $label3 . " " . $_POST['field3'] . "<br />"; 
echo $label4 . " " . $_POST['field4'] . "<br />"; 
echo "Done."; 
?>

，並把在它自己的文件。將表單的action屬性設置爲該文件，並將打印出所有數據。

來源

2012-01-01 11:01:57 Different55

如果我只有一種形式，那將會很棒。但我有20左右。所以我不會爲每個PHP文件！ – sikas 2012-01-01 11:06:17

你不需要。如果他們都是這樣，你可以使用相同的文件。如果他們不是，你仍然可以使用一個文件，但它需要更長的時間。 – Different55 2012-01-01 11:51:06

的一種方法，而無需一個JavaScript庫，是：

var form = document.getElementsByTagName('form')[0]; 

form.onsubmit = function(){ 

    var labels = document.getElementsByTagName('label'); 

    if (!document.getElementById('container')){ 
     var container = document.createElement('ol'); 
     container.id = 'container'; 
    } 
    else { 
     var container = document.getElementById('container'); 
     while (container.firstChild){ 
      container.removeChild(container.firstChild); 
     } 
    } 

    for (var i=0,len=labels.length; i<len; i++){ 
     if(document.getElementById(labels[i].getAttribute('for'))){ 
      var newLi = document.createElement('li'); 
      var iText = document.createElement('span'); 
      newLi.innerHTML = labels[i].innerHTML; 
      iText.innerHTML = document.getElementById(labels[i].getAttribute('for')).value; 
      newLi.appendChild(iText); 
      container.appendChild(newLi); 
     } 
    } 

    document.getElementsByTagName('body')[0].appendChild(container); 

    return false; 

};

JS Fiddle demo。

參考文獻：

來源

2012-01-01 11:17:18

將表單轉換爲純文本

回答

相關問題