In this particular case I'm using google tag manager to submit a form within a bootstrap modal.
I don't have access to the backend and this is why I'm using GTM to target a button and use the onClick.
<script>
$(document).on('submit','#MyForm',function(event){
var form = $('#MyForm');
var submit = $('#ssend_btn');
form.on('submit', function(e) {
e.preventDefault();
if($('input', this).val().trim() == '' ){
//handle error message
alert("im empty and email will not send");
}
else if (submit != 'null' ){
event.preventDefault()
var formData = $(this).serialize();
console.log(formData);
$.ajax({
url: "page.php", // some php
data: formData,
datatype: "json",
type: "POST",
success: function(data) {
}
});
}
});
});
</script>
After the email is sent, the modal must not close and this is why I'm using ajax.
If I remove the validation I can send email, but even blank it will submit.
I have other validation with javascript, but is not respecting it.
<script>
function validateForm() {
var x = document.forms["myForm"]["EMAIL"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
error = "testingo";
document.getElementById("errorid").innerHTML = error;
return false;
}
</script>
on console log this is what i get how wever the email is sent
Are you looking for something like this? Looks like you're using a mixture of vanilla JS and jQuery; I'd suggest sticking to one or the other when trying to reference the form and the form inputs, to make it easier.. Also, if you change your input's type to "email" instead of "text", built in browser functionality (for Chrome, etc) will help to ensure a valid email is entered in addition to your validation logic.
function validateForm() {
if ($('#EMAIL').val().trim() === '') {
return false;
}
var x = $('#EMAIL').val();
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
error = "testingo";
document.getElementById("errorid").innerHTML = error;
return false;
}
return true;
}
$(document).ready(function() {
var form = $('#MyForm');
var submit = $('#ssend_btn');
form.on('submit', function(e) {
e.preventDefault();
if (validateForm() === false) {
//handle error message
alert("im empty and email will not send");
} else {
var formData = $(this).serialize();
console.log(formData);
$.ajax({
url: "page.php", // some php
data: formData,
datatype: "json",
type: "POST",
success: function(data) {
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="MyForm" name="MyForm">
<input type="text" name="EMAIL" id="EMAIL" placeholder="EMAIL" />
<div id="errorid"></div>
<input type="submit" id="ssend_btn" value="Submit" />
</form>
Related
I am trying to submit a form data to php using jquery. I dont want to submit it by default. code is working fine. I dont know where to use event.preventDefault();
below is my jquery code
<script>
$(function () {
$("#submit").click(function () {
var password = $("#password").val();
var confirmPassword = $("#confirm_password").val();
var dataString='password='+ password + 'confirmPassword='+ confirmPassword;
if (password != confirmPassword) {
alert("Passwords and Confirm Password Should match.");
return false;
}
else{
$.ajax({
type: "POST",
url: "update-password.php",
data: dataString,
success: function(result){
alert(result)
}
});
}
});
});
</script>
Don't use click events to control form submission. It is bypassed by keyboard form submission! Always use the submit event.
As you are submitting the form via Ajax you can stop the submit immediately with e.preventDefault()
e.g.
$(function() {
$("form").submit(function(e) {
e.preventDefault();
var password = $("#password").val();
var confirmPassword = $("#confirm_password").val();
var dataString = 'password=' + password + 'confirmPassword=' + confirmPassword;
if (password != confirmPassword) {
alert("Passwords and Confirm Password Should match.");
} else {
$.ajax({
type: "POST",
url: "update-password.php",
data: dataString,
success: function(result) {
alert(result)
}
});
}
});
});
Note: as you are not doing anything special with the submit, you might as well not use Ajax unless you needed to. Just conditionally return true or false.
Returning false is the same as e.preventDefault() and e.stopPropagation().
e.g.
$(function() {
$("form").submit(function() {
var password = $("#password").val();
var confirmPassword = $("#confirm_password").val();
var dataString = 'password=' + password + 'confirmPassword=' + confirmPassword;
if (password != confirmPassword) {
alert("Passwords and Confirm Password Should match.");
return false
}
});
});
General advice: Don't use alert for interaction with the user. Show validation messages on the page instead.
Hi i have a form which uses Ajax to make a post in Rails 4. The javascript runs some validation and should return an alert message once the post is successful. Currently the submit button stays depressed and although the form posts no message gets alerted. I dont know what i'm doing wrong and just want the form to alert a message and then reset itself.
$('#submit1').click(function(e){
e.preventDefault();
var name = $('input#name').val();
if (name == "") {
alert("please enter a name!");
$('input#name').focus();
return false;
}
var email = $('input#email').val();
if (email == ""){
alert("please enter your email");
$('input#email').focus();
return false;
}
var content = $('textarea#text').val();
if (content == ""){
alert("please enter a comment");
$('textarea#text').focus();
return false;
}
var dataString = 'name=' + name + '&email=' + email + '&content=' + content;
$.ajax({
type: "POST",
url: "emailer",
data: dataString,
dataType: 'json',
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
success: function(){
alert("mappy jappy");
$('input#name').reset();
$('input#email').reset();
$('textarea#text').reset();
}
});
return false;
});
You are preventing the wrong event. You need the 'onsubmit' event of the form not the 'onclick' event of the submit button.
$('#myform').on('submit', function(event){
event.preventDefault();
/* your code here */
});
For more info please read :
How to prevent form from being submitted?
First of all the reset function is not for the text boxes..it will run for the form. So the corrected code would be...
<script>
$(function(){
$('#submit1').click(function(e){
e.preventDefault();
var name = $('input#name').val();
if (name == "") {
alert("please enter a name!");
$('input#name').focus();
return false;
}
var email = $('input#email').val();
if (email == ""){
alert("please enter your email");
$('input#email').focus();
return false;
}
var content = $('textarea#text').val();
if (content == ""){
alert("please enter a comment");
$('textarea#text').focus();
return false;
}
var dataString = 'name=' + name + '&email=' + email + '&content=' + content;
$.ajax({
type: "POST",
url: "user_availability.php",
data: dataString,
dataType: 'json',
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
success: function(){
alert("mappy jappy");
$('#contact-form')[0].reset();
}
});
return false;
});
});
</script>
AND the html part would be like below-
<form id="contact-form" method="post" enctype="multipart/form-data">
<input type="text" id="email" name="email" />
<input type="text" id="name" name="name" />
<textarea name="text" id="text"></textarea>
<input type="submit" value="submit" id="submit1" />
</form>
Please Check and let me know...
In a newsletter sign-up form, I would like to make the email disappear after the end user hits enter. I have already added JS to hide and unhide the placeholder text.
The code:
<form id="form" action="https://xxxx.com/subscribe/post-json?u=xxx&id=xx&c=?" method="GET">
<input type="hidden" name="u" value="xxx">
<input type="hidden" name="id" value="xxx">
<input id="email" type="EMAIL" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" placeholder= "Type your email and press enter">
<p id="response"></p>
</form>
And the JS:
<script >
var text = document.getElementById("email");
text.onfocus = function() {
if ( text.placeholder == "Type your email and press enter") {
text.placeholder = "";
}
};
text.onblur = function() {
if ( text.placeholder == "") {
text.placeholder = "Type your email and press enter";
}
};
</script>
I tried to create a function to trigger the event but it still didn't work:
function checkEnter(event)
{
if (event.keyCode == 13) {text.placeholder = "cool";}
};
Could you all see what's wrong with my code?
Thank you.
You need to add a event listener for the enter key. You could remove your function checkEnter and use this instead:
document.querySelector('#email').addEventListener('keypress', function (e) {
var key = e.which || e.keyCode;
if (key == 13) {
text.placeholder = "cool";
}
};
I have integrated the code below with the mailchimp form and got the desired results:
var paragraph = document.getElementById('response');
$('#form').submit(function(e) {
var $this = $(this);
$.ajax({
type: "GET", // GET & url for json slightly different
url: "https://xxxxx.com/subscribe/post-json?u=xxxx&id=xxx&c=?",
data: $this.serialize(),
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server."); },
success : function(data) {
if (data.result != "success") {
paragraph.innerHTML = data.msg;
text.placeholder = "Oopsy daisy! Error :-(";
form.reset();
} else {
paragraph.innerHTML = data.msg;
text.placeholder = "Thanks so much!";
form.reset();
}
}
});
return false;
});
I am using AJAX with JQUERY to call a PHP script to validate a user email. But, for some reason, the form submits even when it shouldn't. What am I doing wrong? I know the error is for sure not in my PHP.
My Code:
$("#signup").submit(function() {
var error= false;
var dataString = $(this).serialize();
var email= $("#email").val().trim();
if (email != 0) {
// Run AJAX email validation and check to see if the email is already taken
$.ajax({
type: "POST",
url: "checkemail.php",
data: dataString,
async: false,
success: function(data) {
var error= false;
if (data == 'invalid') {
var invalid= 1;
}
else if (data == 'taken') {
var taken= 1;
}
if (invalid == 1) {
alert('invalid email');
error = true;
}
if (taken == 1) {
alert('email taken');
error = true;
}
if (error == true) {
return false;
}
}
});
}
});
Try updating these:
$("#signup").submit(function(e) { //<----pass the event here as "e"
e.preventDefault(); //<----stops the form submission
var error= false;
var dataString = $(this).serialize();
var email= $.trim($("#email").val()); //<----use trim this way
If you absolutely have to use AJAX for form submission, this might be a better way to do it:
$('form').submit({
$.ajax({
type:'post',
url: 'someurl.php',
data: dataString,
context: this, // this here refers to the form object
success:function(data)
{
// perform your operations here
if(something_is_wrong)
{
// show message to user
}
else
{
this.submit(); // put this code in the block where all is ok
}
}
});
return false; // makes sure the form doesn't submit
});
I'm trying to create a jquery contact form that sends an ajax request when clicked.
You can view it by visiting: http://childrensplaza.mn, and clicking the "click here to contact us button"
When testing this out though, After I click "send inquiry", it takes a while for the success message to show up, and I'm able to click it multiple times, causing my message to be sent multiple times.
The code for it is below ->
<script>
$(function(){
$('#trigger').click(function(){
$('#overlay').fadeIn(500);
$('#form').fadeIn(500);
});
$('#overlay').click(function(){
$('#form').fadeOut(500);
$('#overlay').fadeOut(500);
});
});
// Get the data from the form. Check that everything is completed.
$('#submit').click(function() {
var email = document.getElementById("email").value;
var inquiry = document.getElementById("inquiry").value;
if( email == "" )
{
alert("Please enter your email.");
return false;
}
if( inquiry == "" )
{
alert("Please enter your inquiry.");
return false;
}
var dataString = 'email=' + email + '&inquiry=' + inquiry ;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "http://childrensplaza.mn/send.php",
data: dataString,
success: function() {
$('#success').fadeIn(500);
}
});
return false;
});
</script>
How would I make it so that the success message shows up on the first click, and I am not able to send the same request multiple times?
This is easy enough to handle by adding a class when submitted the first time, and checking if the class is applied to determine whether or not to process the form. If the button already has the class, do not continue to process.
if ( $(this).hasClass("pressed") ) return false;
$(this).addClass("pressed");
Embedded in your code:
<script>
$(function(){
$('#trigger').click(function(){
$('#overlay').fadeIn(500);
$('#form').fadeIn(500);
});
$('#overlay').click(function(){
$('#form').fadeOut(500);
$('#overlay').fadeOut(500);
});
});
// Get the data from the form. Check that everything is completed.
$('#submit').click(function() {
var email = document.getElementById("email").value;
var inquiry = document.getElementById("inquiry").value;
if( email == "" )
{
alert("Please enter your email.");
return false;
}
if( inquiry == "" )
{
alert("Please enter your inquiry.");
return false;
}
if ( $(this).hasClass("pressed") ) return false;
$(this).addClass("pressed");
var dataString = 'email=' + email + '&inquiry=' + inquiry ;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "http://childrensplaza.mn/send.php",
data: dataString,
success: function() {
$('#success').fadeIn(500);
}
});
return false;
});
</script>
You could take one step further by resetting the class after successful ajax response.
$('#success').fadeIn(500); $("#submit").removeClass("pressed");
you can create a flag and control it with the ajax events beforeSend and complete ...
<script>
$(function(){
$('#trigger').click(function(){
$('#overlay').fadeIn(500);
$('#form').fadeIn(500);
});
$('#overlay').click(function(){
$('#form').fadeOut(500);
$('#overlay').fadeOut(500);
});
});
$('#submit').click(function() {
var email = document.getElementById("email").value;
var inquiry = document.getElementById("inquiry").value;
if( email == "" )
{
alert("Please enter your email.");
return false;
}
if( inquiry == "" )
{
alert("Please enter your inquiry.");
return false;
}
var dataString = 'email=' + email + '&inquiry=' + inquiry ;
$.ajax({
type: "POST",
url: "http://childrensplaza.mn/send.php",
data: dataString,
beforeSend: function(xhr, opts){
if($('#submit').hasClass("posting"))
xhr.abort();
else
$('#submit').addClass("posting");
},
complete: function(){
$('#submit').removeClass("posting");
},
success: function() {
$('#success').fadeIn(500);
}
});
return false;
});
</script>