HTML输入输出_JavaScript

用户在此处输入其姓名作为表单的一部分。

  <p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>

当前，该解决方案提供了一种提供示例文本的方式，该示例文本也可以进行编辑，并且PHP可以在其中运行，这与<textarea>不同。 但是，我的问题是，与<textarea>不同，我似乎无法获得<div contenteditable...来将其信息提交到我在服务器上设置的电子邮件php文件中。 任何人都不知道我将如何实现这一点。

  <div contenteditable="true" name="message" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p>
 <p> Kind Regards, </p>
 <script type="text/javascript"> document.write(document.getElementById('flname').id);</script>
 </div>
 <div align="center">

＃更新2：您好，

谢谢你们的快速回复。

我尝试在此处实施您的解决方案：

    <div align="left">
     <form action="form.php" method="post" enctype="multipart/form-data">
     <p>Name <font color="red">(required) </font> <input name="flname"       required="required" placeholder="Your Name" </p>
    <p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required="required" placeholder="Your Email">  </p>
    <p>Address <font color="red">(required) </font> <input name="address" type="name" required="required" placeholder="Address"> </p>
        <p>City <font color="red">(required) </font> <input name="city" type="name" required="required" placeholder="City"> </p>
        <p>Postcode <font color="red">(required) </font> <input name="postcode" type="name" required="required" placeholder="Postcode"> </p>
               <p>What is 2+2? <font color="red">(required) </font> <input name="human" required placeholder="Type Here">  </p>
        <p> <b> You can edit the text below as much or as little as you wish </b> </p>
          <div contenteditable="true" required="" placeholder="Your              Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p> <p> Kind Regards, </p>
    </div>
         <input type=hidden name=userContent id=userContent>
        <script>
        var el=document.getElementById('userForm');
        el.addEventListener('submit', function() {
        var elInput=document.getElementById('userContent');
        var elDiv=document.getElementById('divContent');
        elInput.value = elDiv.innerHTML;
        });
        </script>

     <div align="center">
    <input id="cancel" name="cancel" type="submit" value="Cancel" />
        <input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>

PHP：

  <?php
    ini_set('display_errors',1);  error_reporting(E_ALL);
    include('mplookup.php');
    $name = $_POST['flname'];
    $email = $_POST['emailfrom'];
    $message = $_POST['userContent'];
     $address = $_POST['address'];
     $city = $_POST['city'];
     $postcode = $_POST['postcode'];
    $human = $_POST['human'];
    $to = "";
    $body = $message;
    $subject = 'From: $email \r\n : Sisi\'s visit to the UK: Sent using EG4DEMUK\'s Tool ';

    ?>
    <?php
    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $email))
        {
            echo '<p>Thank you for your email!</p>';
        } else {
            echo '<p>Oops! An error occurred. Try sending your message again.</p>';
        }
    }
    ?>

但是，输出的电子邮件如下所示

From: Hassan Ismail
E-Mail: 
Message

提前致谢

<div>不是表单元素，因此不会提交。 您需要在表单的Submit事件上实现一个事件侦听器，以拾取<div>的内容并将其放入form元素。 为此，将一个隐藏的<input>添加到表单中。

这是一个简单的例子：

<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
    <input type=hidden name=userContent id=userContent>
        <input type=submit name=submit value="Send!">
</form>


<script>
        var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
    var elInput=document.getElementById('userContent');
    var elDiv=document.getElementById('divContent');
    elInput.value = elDiv.innerHTML;
});

</script>

 var el=document.getElementById('userForm'); el.addEventListener('submit', function() { var elInput=document.getElementById('userContent'); var elDiv=document.getElementById('divContent'); elInput.value = elDiv.innerHTML; });

 <div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div> <form id=userForm> <input type=hidden name=userContent id=userContent> <input type=submit name=submit value="Send!"> </form> <script>

getElementById('flname') ...是否清楚地以方法的名称编写，该方法通过其Id而不是其名称获取元素。 使用getElementsByName或为您输入的标签设置一个ID。 您的输入标签也没有关闭...不要使用字体-它已过时。 如果要提交标记内容，请使用ajax或在代码中的某处设置一个隐藏字段，然后在实际提交之前使用Submit处理器将其与div的内容一起设置。

<div id="yourdivid">....</div>
<input id="submitarea" type="hiden" name="submitarea">

$(function() {
  $('#yourformid').submit( function() {
    $('#submitarea').val($('#yourdivid').html()); 
  }); 
});

HTML输入输出

问题描述

1楼

2楼