使用 AJAX MVC PHP 发送内容 tinyMCE

Question

I am trying to post a array that has the elements of an email like subject and message. I am using tinyMCE on the subject part and now that is the only part that is not getting send through. All the other POST variables do have something in them.

Script:

        $('#message').html(tinymce.get('#message').getContent());
        $.ajax({
            type: "POST",
            data: $('#contact-form, #message').serializeArray(),
            dataType: 'JSON',
            url: $('#url').val() + 'Ajax/ajax',
            success: function ($data) {
                console.log($data);
                console.log("Email verzonden!");
            },
            error: function (jqXHR, exception) {
                alert("ajaxerror: " + jqXHR.responseText);
            }
        });
    });

Form:

<section class="mb-4">
    <div class="row">
        <div class="col-md-9 mb-md-0 mb-5">
            <form id="contact-form" name="contact-form">
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form mb-0">
                            <input type="text" id="reciever" name="reciever" class="form-control" placeholder="Aan *" required>
                        </div>
                        <div class="md-form mb-0">
                            <input type="text" id="cc" name="cc" class="form-control" placeholder="CC">
                        </div>
                        <div class="md-form mb-0">
                            <input type="text" id="bcc" name="bcc" class="form-control" placeholder="BCC">
                        </div>
                        <div class="md-form mb-0">
                            <input type="text" id="subject" name="subject" class="form-control" placeholder="Onderwerp *" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form">
                            <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" placeholder="Bericht *"></textarea>
                        </div>
                    </div>
                </div>
                <div class="text-center text-md-left">
                    <input type="hidden" name="action" value="GCSSendMail">
                    <input type="submit" id="GCSSendMail" class="btn btn-primary AjaxCall" value="Submit">
                </div>
                <div class="status"></div>
            </form>
        </div>
    </div>
</section>
<a href="<?php echo BASE_URL ?>Mail/mail">Go mail</a>

Ajaxcontroller

function action()
{
    if (isset($_POST['action'])) {
        switch ($_POST['action']) {
            case "SendMail":
                $mailController = new MailController;
                $result = $mailController->sendMail($_POST['reciever'], $_POST["subject"], $_POST["message"]);
                return $result;
                break;
         }
    }
}

I have some extra files connected to it like a dispatcher and a controller but that has no influence on the content not getting to the ajax script.

Answer 1

When TinyMCE is loaded on the page the original <textarea> is no longer visible. TinyMCE uses an iframe for the content editing area in place of the <textarea> . If you use JavaScript code to send the form's content the underlying <textarea> will not contain any content as you are not actually typing into the <textarea> . You can use the triggerSave() method on the tinymce object to have TinyMCE update the <textarea> with the current contents of the editor. You should do this right before you start your AJAX POST process.

Instead of

$('#message').html(tinymce.get('#message').getContent());

...you want to use...

tinymce.triggerSave();

Answer 2

You made a silly mistake. You are not supplying the URL to the AJAX request. Look at line

url: $('#url').val() + 'Ajax/ajax',

I could not find url ID in html form. Add a fully qulified URL to AJAX's url attribute.