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
Related
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.
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.
I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.
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()
hi here is my problem I have a form
<div class="default-form" id="website_form" data-method="website">
<div class="panel-heading panel-heading-transparent"> <strong>Website Information</strong> </div>
<div class="panel-body">
<form class="validate well" id="default_form" onsubmit="return false;" data-toastr-position="top-right" data-success="Sent! Thank you!" novalidate="novalidate">
<fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12"> <label>Title *</label> <input type="text" class="form-control required" value="{$set_data.DEF_TITLE}" name="d[DEF_TITLE]" id="DEF_TITLE"> </div>
</div>
</div>
</fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12"> <button id="submit_form" data-fid="default_form" class="btn btn-3d btn-primary btn-xlg btn-block margin-top-30" type="submit">
UPDATE
</button> </div>
</div>
</div>
</form>
</div>
</div>
and the parameteres being sent is this
d[DEF_TITLE] sample message <iframe></iframe>
and the source is this
DEF_TITLE%5D=sample+message+%3Ciframe%3E%3C%2Fiframe%3E
after I submit my form via ajax and now my code for my serverside (where the post will be directed) is this
function procedure()
{
$fs = $this->input->post('d');
print_r('bbb');
print_r($fs);
exit;
}
I recieve empyt in my post. But if I remove the <iframe> or <iframe></iframe> in the text that I will input in the form, the post will now have a value. How is this possible? I used php codeigniter only. Please help me for I really tried all that I can think of... Thanks...
Additional Info for my ajax used:
var posts = $('#default_form').serialize();
$.post(path + "/procedure/", posts, function(result) {
var result = $.parseJSON(result);
});
Additional Info seems like html tag makes the post disappeared only. I tried "test <b>", "test <html>", "test <div>", "test <strong>", "test <ul>", "test <li>", "test <table>" and they all works well in post
Try the following: change the name of the input
<label>Title *</label> <input type="text" class="form-control
required" value="{$set_data.DEF_TITLE}" name="def_title"
id="DEF_TITLE">
$fs = $this->input->post('def_title');