We Keep Coding

Send content tinyMCE using AJAX MVC PHP

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>
Go mail
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.

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();

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.

Submit button is not working with HTML and JavaScript

Whenever I attempt to click the submit button, nothing happens.
I have attempted to change the button, however I doubt this is the issue.
JavaScript Code:
$('#contactForm').submit(function () {
$.ajax({
type: "POST",
url: "php/contact.php",
data: $('#contactForm').serialize(),
success: function (msg) {
if (msg == 'SEND') {
$('.success').fadeIn();
$('.error').fadeOut();
$('#contactForm')[0].reset();
} else {
$('.success').fadeOut();
$('.error').fadeIn().find('h3').text(msg);
}
}
});
return false;
});
HTML Code:
<div>
<h2 class="small-heading">CONTACT US</h2>
<div class="contact-form col-sm-11 clearfix">
<form action="contact-complete.php" id="contactForm" method="post" name="contactForm">
<fieldset>
<div class="col-sm-12">
<input id="name" name="name" placeholder="Your Name*" type="text" value="">
</div>
<div class="col-sm-12">
<input id="email" name="email" placeholder="Your Email*" type="text" value="">
</div>
<div class="col-xs-12">
<textarea cols="5" id="message" name="message" placeholder="Your Message....*"></textarea>
</div>
<div class="col-xs-12">
<button type="submit" form="contactForm" class="submit active">SEND</button>
</div>
<div class="error col-xs-12">
<h3></h3>
</div>
<!-- Error Message [ END ] -->
<div class="success col-xs-12" id="update">
<h3>Success! Your message was sent.</h3>
</div>
<!-- Submit Button [ END ] -->
</fieldset>
</form>
<!-- Contact Form [ END ] -->
</div>
</div>
If you could please help me out this would be much appreciated.
Thank you for all of your help.

This seems to be an issue within the AJAX call. I removed "return false;" from the code and it seemed to work. However, it was sending the information twice. So I just removed the AJAX code all together and it worked just fine redirecting to the PHP mail() script.
Thanks for all of your help.

Your button doesnt have an action and you don´t listen for it either
<button type="submit" form="contactForm" class="submit active" OnClick="submit()">SEND</button>
Or add an ID and listen for that in the JS

My Formspree contact form isn't sending out the email information

I have been using formspree on one of my sites. Everything was working fine at first then the form messages weren't sending out emails. I see the name and the message when the form is sent out, but the email just isn't registering. I looked at the shortcode and don't see anything on my end. Does anyone see the issue here?
I also have my "I'm Looking for a quote" wording overlapping my check box in most browsers. I put a p in and took it out, but I think that might be messing with the code. Anything thoughts on this as well?
Here's the HTML:
<form role="form" id="formspree" method="post">
<div class="form-group">
<label class="sr-only" for="contact-name">Your Name</label>
<input type="text" name="name" placeholder="Your Name" class="contact-email form-control" id="contact-email">
</div>
<input type="text" name="_gotcha" style="display:none">
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="text" name="email" placeholder="Email" class="contact-email form-control" id="contact-email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea name="message" placeholder="Message" class="contact-message form-control" id="contact-message" style="height: 168px;width:100%;"></textarea>
</div>
<div class="row">
<div class="col-sm-6" style="
text-align: right;
padding-right: 15px;
<div class="form-group"><label class="checkbox-inline"><input id="looking_for_quote" type="checkbox" value="quote">I'm Looking For A Quote</label>
</div>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-lg"> Send Message</button>
</div>
</div>
</form>
and here is the script:
$(document).ready(function() {
// process the form
$('form[method=post]').submit(function(event) {
var email = "mat.mcsales#verizon.net";
if ($('#looking_for_quote').is(':checked')) {
email = "orders.mcsales#gmail.com";
}
$.ajax({
url: "https://formspree.io/" + email,
method: "POST",
data: {
message: $('textarea').val(),
from: $('input[name=name]').val(),
_reply: $('input[type=email]').val()
},
dataType: "json",
success: function() {
alert("Thanks! We'll get back to you soon.");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});

I figured it out I think.. I changed _reply: $('input[type=email]').val() to email: $('input[name=email]').val()

AJAX form submission - Each click submits the form i++ number of times

I have an issue where my form submission in with AJAX works fine the first time, but if I click the submit button again, or press enter, the form submits twice. A third click causes the form to be submitted 3 times and so on. I've tried inserting return false and preventDefault() within the scripts.js file to no avail.
An implementation of my form can be found here and the resulting list of output can be found here
Additionally, I notice that the scripts.js never proceeds to the line with document.getElementById('test').innerHTML="this works3";
Any help would be greatly appreciated. Thank you!
index.html
<form id="form1" action="addpost.php" method="post">
<div class="form-group" >
<label for="title">Title:</label>
<input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required>
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<div class="form-group">
<label for="article">Article:</label>
<textarea name="article" class="form-control" rows="5" id="article"></textarea>
</div>
<div class="form-group">
<label for="img1">Image 1:</label>
<input type="file" class="form-control" id="img1" accept="image/*">
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<label id="test">hi</label>
<button class="btn btn-primary" onclick="poop()">Button</button>
<input type="submit" class="btn btn-primary" onclick="poop()" value = "submit"/>
</form>
scripts.js
function poop()
{
document.getElementById('test').innerHTML="this works";
var form = $('#form1');
document.getElementById('test').innerHTML="this works2";
form.submit(function (event)
{
$.ajax
({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data)
{
alert('ok');
}
});
});
document.getElementById('test').innerHTML="this works3";
}

Thanks to Liam and Vinod for pointing me in the right direction. I included the script to override the submit function in the index.html file. Solved the problem quite nicely.
index.html
<form id="form1" action="addpost.php" method="post">
<div class="form-group" >
<label for="title">Title:</label>
<input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required>
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<div class="form-group">
<label for="article">Article:</label>
<textarea name="article" class="form-control" rows="5" id="article"></textarea>
</div>
<div class="form-group">
<label for="img1">Image 1:</label>
<input type="file" class="form-control" id="img1" accept="image/*">
<span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
</div>
<label id="test">hi</label>
<input type="submit" class="btn btn-primary" value = "submit"/>
</form>
// script included within body of html
<script type="text/javascript">
var form = $('#form1');
document.getElementById('test').innerHTML="this works2";
form.submit(function (event)
{
event.preventDefault();
$.ajax
({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data)
{
alert('ok');
}
});
});
</script>

Html form submit button not calling succes method?

Html form:
<form class="form-horizontal" id="contactfrm" onsubmit="contactus()">
<fieldset class="scheduler-border">
<!-- Form Name -->
<legend class="scheduler-border">Fill contact details</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-6"><input id="fname" name="firstName" type="text" placeholder="First Name" class="form-control input-md" title="Enter your First Name" required="required"></div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lname">Last Name</label>
<div class="col-md-6"><input id="lname" name="firstName" type="text" placeholder="Last Name" class="form-control input-md" title="Enter your Last Name" required="required"></div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="button"></label>
<div class="col-md-4">
<button type="submit" value="Submit" class="btn btn-success" id="submit" />
</div>
</div>
</fieldset>
</form>
script code:
<script type="text/javascript">
function contactus(){
alert("hi");
var test = JSON.stringify({
"help": $('#help').val(),
"firstName": $('#fname').val(),
"lastName":$('#lname').val()
});
alert("test values are"+test);
$.ajax({
type: "POST",
contentType: 'application/json',
url: baseurl+"contact/add",
data: test,
dataType:"text",
success:successmethod,
error: function(data,status)
{
alert("Error "+status);
}
});
}
function successmethod(data){
document.getElementById("contactfrm").reset();
$('#showcontactmessage').show();
alert("Contact Details Saved");
}
</script>
Anchor tag:
Contact us now
In the above form when i use anchor tag to submit the form every thing works fine ie; the function is called and the values are saved in database and success method is called and executed.but the problem here is, when i use button tag to submit form values, the values are saved in databse but the succes method is not called instead it calling error method..Any help would be appreciated??

The submit handler does not prevent the form from submitting.
The JavaScript will run, then the form will immediately submit. The browser will leave the current page and load a new one before it gets the response to the Ajax request. The event handler won't exist on the new page.
You need to prevent the default form action. Using the 90s style approach you are taking, you need to return false from the event handler.
onsubmit="contactus(); return false;"