Question

I’ve taken a few scripts from elsewhere on the Stack to create a contact form that emails me when the user submits.

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 = "[e-mail]"; //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 :) 
?>

The script SHOULD get the content entered in the contenteditable div and pass it through to the hidden textarea, then submit to my email. However, it’s currently only passing through the "name" and "email" fields and leaving the body of the email blank.

What have I missed here?

EDIT: Made a small error in the code hidden textarea above, value=”MESSAGE” not “SUBJECT”. Still, code not working.

Answer 1

Contenteditable content doesn’t get passed through the form when submitted.
But, it looks like you’re using some JS to get the content of the editable content div and put it into the textarea with a name of “subject”.

Therefore, it will be accessible through $_POST['subject'] only.

Also, you’re doing an onsubmit=”” in the html and a on submit in the JS file. I don’t think both will work, you’d be better combining the two (i.e. just use the JS file).

It also won’t work without JS enabled, which I’d say is a bigger problem.