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

【问题标题】：Using contenteditable in an email form using jQuery/Javascript使用 jQuery/Javascript 在电子邮件表单中使用 contenteditable
【发布时间】：2012-01-10 10:15:48
【问题描述】：

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

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>

脚本：

    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 = "my.email@whatever.com"; //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" 字段，并将电子邮件正文留空。

我在这里错过了什么？

编辑：在上面的代码隐藏文本区域中犯了一个小错误，value="MESSAGE" 而不是 "SUBJECT"。仍然，代码不起作用。

【问题讨论】：

标签： php javascript forms contenteditable

【解决方案1】：

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

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

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

如果不启用 JS，它也无法工作，我会说这是一个更大的问题。

【讨论】：

啊，你明白了 - 原来它正在寻找表格的 name="xyz" 部分，我愚蠢地认为它正在查看 value=！干杯伙伴。