We Keep Coding

JavaScript not running in HTML document upon form submission

I'm simply setting up a static website form submission. I've been using this JSFiddle as a template to add a submission button response. Admittedly, my JavaScript isn't where it needs to be yet, but I believe that the JavaScript here is supposed to alert me about the status of the submission when the submit button is clicked. At the current moment, it doesn't seem to work, preventing submission at all when I include the script at the bottom of my HTML document.
Here's my HTML:
<div class="container">
<div class="columns">
<div class="column is-half">
<form action="https://api.staticforms.xyz/submit" method="post" id="staticform">
<!-- Replace with your StaticForms accessKey -->
<input type="hidden" name="accessKey" value="______">
<input type="hidden" name="subject" value="Test from jsfiddle">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" name="name" placeholder="Enter Your Name" required>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" name="email" placeholder="Enter Your Email" required>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" name="message" placeholder="Enter Your Message" required></textarea>
</div>
</div>
<button class="button is-primary" type="Submit">Submit</button>
</form>
</div>
</div>
</div>
And here's my JavaScript at the bottom of the page:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$("#staticform").submit(function(event) {
event.preventDefault();
$.ajax({
url: 'https://api.staticforms.xyz/submit', // url where to submit the request
type: "POST", // type of action POST || GET
dataType: 'json', // data type
data: $("#staticform").serialize(), // post data || get data
success: function(result) {
// you can see the result from the console
// tab of the developer tools
alert(JSON.parse(result));
},
error: function(xhr, resp, text) {
alert(xhr, resp, text);
}
})
});
</script>
I'm not sure what I'm missing here. It seems to work in the JSFiddle, but does nothing on my end. When I remove the script completely the submission goes through but doesn't prompt me with a status.
I get the following error in the console:
Unexpected token o in JSON at position 1
Any ideas? Ultimately, I want a way to demonstrate form status upon clicking the submit button.

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

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;"