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.

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>

Stop my form moving on error

Why does my form shift down and a little to the right when validate.js displays an error? I just can't figure it out and where I can adjust this. I am using bootstrap. I'd really appreciate any help. Thanks.
The jquery
$(document).ready(function(){
$("#message").hide();
//Define your validation rules.
$("#bill_cost").validate({
expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
message: "error"
});
//Define the event that will occur when the entire form is validated (on form submission)
$('#myform').validated(function(){
var formdata = $('#myform').serialize();
//Post form data
$.post('../php_includes/insert.php', formdata, function(data){
//Process post response
$("#message").html(data);
$("#message").fadeIn(500);
$("#message").fadeOut(500);
});
//Reset Form
$('#myform')[0].reset();
});
});
This is the form
<form class="form-inline" action="" id="myform" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="bill_cost"></label>
<div class="col-md-8">
<input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit1"></label>
<div class="col-md-4">
<button type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
</div>
</div>
</form>