使用 jQuery/Javascript 在电子邮件表单中使用 contenteditable

Question

我从堆栈中的其他地方获取了一些脚本来创建一个联系表单，当用户提交时该表单会向我发送电子邮件。

HTML:

<form onsubmit="return getContent()">
    <fieldset>
        <input name="name" value="NAME" style="max-width:15%" type="text"/>
        <input name="email" value="EMAIL" style="max-width: 30%" type="text"/>
        <div id="message" contenteditable="true" name="message" value="expanding textarea">HELLO</div>
        <textarea id="my-textarea" value="MESSAGE" style="display:none"></textarea>
        <input type="submit" style="margin-right:0" value="Submit" />
    </fieldset>
</form>

SCRIPTS:

    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("message").innerHTML;
    }

    $('form').submit( function() {
    $.ajax({
        type: "POST",
        url: "email.php",
        data: $(this).serialize(),
        success: function() {
            // Update page with success message
        }
    });
    return false;
});

PHP:

<?php 

$recipient = "[email protected]"; //recipient 

$Name = ($_POST['name']); //senders name 
$email = ($_POST['email']); //senders e-mail adress 
$mail_body = ($_POST['message']); //mail body 

$header = "From: ". $Name . " <" . $email . ">\r\n"; //optional headerfields 

mail($recipient, $subject, $mail_body, $header); //mail command :) 
?>

脚本应该获取 contenteditable div 中输入的内容并将其传递给隐藏的文本区域，然后提交到我的电子邮件。但是，它目前仅传递 "name" 和 "email" 字段，并将电子邮件正文留空。

我在这里错过了什么？

编辑：在上面的代码隐藏文本区域中犯了一个小错误，值=“MESSAGE”而不是“SUBJECT”。尽管如此，代码仍无法正常工作。

Answer 1

提交时，可内容编辑的内容不会通过表单传递。
但是，看起来您正在使用一些 JS 来获取可编辑内容 div 的内容并将其放入名为“subject”的文本区域中。

因此，只能通过 $_POST['subject'] 访问它。

另外，您正在 html 中执行 onsubmit="" ，并在 JS 文件中执行 on Submit 。我认为两者都不起作用，你最好将两者结合起来（即只使用 JS 文件）。

如果没有启用 JS，它也无法工作，我认为这是一个更大的问题。