Question

用户在此处输入他们的名字作为表格的一部分。

  <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">

＃Update 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

提前致谢

Answer 1

<div>不是表单元素，因此不会提交。您需要在表单的submit事件上实现一个事件侦听器，该事件将获取<div>的内容并将其放在表单元素中。为此目的，在表单中添加隐藏的<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>

Answer 2

x ...它是用方法的名称写的，它是由getElementById('flname')获取元素的方法，而不是他的名字。使用Id或为输入标记设置ID。你的输入标签也没有关闭...不要使用字体 - 它已经过时了。如果你想提交标签内容，使用ajax，或在代码中设置隐藏字段somwhere，那么使用submit handler在实际提交之前用div的内容设置它。

getElementsByName

HTML输入输出

2 个答案: