Отправьте значение элемента <p>при отправке HTML-формы

Question

У меня есть этот код: <p class = "foo">Text</p>

И у меня также есть форма: <form action = "XXX.php" method = post></form>

Однако, как я могу получить значение <p> при его отправке?, так как элемент <p> можно изменить.

Итак, я имею в виду возможность публикации значения <p>, когда пользователь отправляет форму, и возможность доступа к нему из этогоphp файл с: $_POST['foo'];

Спасибо, я старался быть максимально понятным.

Answer 1

Вы должны использовать Javascript для этого

Функция jQuery, которая будет работать

$("form").submit(function(){

    var value = $("p").html();

    // If foo already exists
    if( $("[name=foo]").length > 0 )
    {
        $("[name=foo]").val(value);
    } 
    else
    {
         var input = $("<input />", { name : "foo", 
                                      value : value , 
                                      type : "hidden" });
         $(this).append(input);
    }

});

Answer 2

Используйте

<input type="hidden" value="something" name="something" id="something" />

, а при изменении внутреннего HTML-кода <p> измените значение скрытого ввода.

Answer 3

Самое простое, что нужно сделать, это установить значение скрытого поля формы при изменении содержимого вашего <p>.

В качестве альтернативы, вы можете получить его содержимое и публиковать с помощью JavaScript.

Answer 4

Я думаю, что вам лучше всего сделать так, чтобы вход был включен только для чтения, а стиль был похож на <p>.Лучше попытаться добавить его к параметрам POST с помощью JavaScript.

Вот краткий пример .Могу поспорить, что это все еще можно улучшить с помощью нескольких дополнительных CSS-причуд, немного поэкспериментируйте.

Answer 5

Вы можете создать скрытое поле на лету и установить его значение при отправке формы. Как это:

<form id="form" action="/somewhere" method="post">
    <p>Some text</p>
    <input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
  var form = document.getElementById('form');
  form.onsubmit = function()
  {
    var p = this.getElementsByTagName('p')[0];
    if (!document.getElementById('pval'))
    {
      var pinput = document.createElement('input');
      pinput.setAttribute('type', 'hidden');
      pinput.setAttribute('id', 'pval');
      pinput.setAttribute('name', 'p');
      this.appendChild(pinput);
    }

    document.getElementById('pval').value = p.innerHTML;

    return true;
  }
</script>

Работает, я проверял.

Answer 6

1. Для текста необходимо , чтобы использовать поле ввода:

   <input type="text"/>

2. Поля формы должны иметь id:

   <input type="text" id="pewpew" class="foo"/>

Я бы пошел с:

<input type="text" id="pewpew" class="foo" value="default text goes here"/>

OR

Используйте различные обходные пути, такие как установка скрытых элементов формы на лету и т. Д.