преобразование формы в обычный текст

У меня есть страница, которая генерирует формы в зависимости от выбора пользователя. Я хочу знать, есть ли способ конвертировать форму в простой текст? Ex. Форма имеет 4 поля, каждая из которых имеет метку. Я хотел бы взять все метки/поля и распечатать их пользователю следующим образом:преобразование формы в обычный текст

label1 field1 
label2 field2 
label3 field3 
label4 field4

Есть ли способ сделать это?

источник

2012-01-01 sikas

Для этого вам потребуется использовать скрипты на стороне клиента, предпочтительно jQuery. Это уместно в вашем случае? –

Да, есть. С какой надбавкой вы работаете? Что вы пробовали? Какие исследования вы сделали? Составили ли вы [JS Fiddle demo] (http://jsfiddle.net/) для нас? –

@ Shadow Wizard: да, это приемлемо. – sikas

Вы можете использовать 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

@sikas да, вам нужно ссылаться на один файл, можно найти последнюю версию [здесь] (http://code.jquery.com/jquery-latest.min.js) - либо скопировать файл локально на свой собственный сервер , или ссылку непосредственно на этот файл, например '' –

Более надежный источник для размещенных версий (поскольку я не уверен о позиции jQuery об использовании их размещенной версии) будут [размещенные библиотеки Google] (http://code.google.com/apis/libraries/devguide.html#jquery). – Purag

Вы можете получить значение для меток и полей в JavaScript с использованием

var label1 = getElementById("id").name

Создать строку, отформатированную как вы хотите, чтобы показать пользователю и показать все значения с

document.write(string);

источник

2012-01-01 10:59:34 Shraddha

Можете ли вы привести пример? – sikas

Если вы не Не обращайте внимания на дополнительный файл с 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."; 
?>

и положить, что в его собственном файле. Установите атрибут действия формы в этот файл и распечатайте все данные.

источник

2012-01-01 11:01:57 Different55

Было бы здорово, если бы у меня была только одна форма. Но у меня около 20. Так что я не собираюсь делать php-файл для каждого! – sikas

Вам не обязательно. Если они все такие, вы можете использовать один и тот же файл. Если это не так, вы все равно можете использовать один файл, но это займет немного больше времени. – Different55

Один метод, без библиотеки 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

преобразование формы в обычный текст

ответ

Смежные вопросы