用于在同一页面中打印输入和文本区域的表单 - Form to print inputs and textarea in the same page

Form to print inputs and textarea in the same page

我有这个表单，现在将结果发送到电子邮件。

<form action="https://formmail.servage.net/" method=POST>
<input type=hidden name="id" value="28939">
<input type=hidden name="subject" value="FORM SUBJECT"> 
<input type=text placeholder="E-Mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'E-Mail'" name="E-MAIL"><p> 
<input type=text placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'" name="NAME"><p> 
<input type=text placeholder="City" onfocus="this.placeholder = ''" onblur="this.placeholder = 'City'" name="CITY"><p> 
<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" name="FEEDBACK" id=text rows=5 placeholder="Message" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'"></textarea> <br><br>
Push enter
</form>

https://jsfiddle.net/pdkox9ar/

我想要的只是在表单底部的同一页面中打印输入和文本区域。这怎么可能？

假设您添加一个按钮来参与从输入字段中提取值 - 并且还添加一个容器div 来显示您的文本，如下所示;

<button id="showme">showme</button><div id="output" />

您需要一些 javascript 来遍历表单的输入字段，类似于以下内容;

var button = document.getElementById('showme');
document.getElementById('showme').onclick = function showcontents() {
  var form = document.forms[0];
  var result = "";
  for(var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    var value = input.value;
    var key = input.name;
    result += input.name + " = " + input.value + "<br/>";
  }
  document.getElementById('output').innerHTML = result;
};

我没有在较旧的浏览器中对此进行测试，我相信文本区域可能并不总是具有value属性。相反，您可以通过文本区域上的innerHTML提取内容 - 但这仅来自内存。以上应该适用于支持 html5 的浏览器。

<form name="name" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >

它会将表单数据传递给同一个脚本，因此您可以在顶部放置PHP以获取该值。

if (isset($_POST ['E-Mail'])) {
    $email = $_POST ['E-Mail']; 
}

并在页面上显示：

echo $email;