Develop Reference

Closing the Fancybox Window

There is a button when you click on which the fancybox with the form opens, after filling out the form and clicking on the send button, I want this window to close automatically and another one opens with the text "that the message was sent successfully" and after a couple of seconds it would disappear, or when pressed outside the window area.
$("form").submit(function() { //Change
var th = $(this);
$.ajax({
type: "POST",
url: "mail.php", //Change
data: th.serialize()
}).done(function() {
$('#alert-massage').fadeIn(500);
alert("Thank you!");
setTimeout(function() {
// Done Functions
th.trigger("reset");
}, 1000);
});
return false;
});
<div id="modal">
<div class="modal__wrap">
<div class="modal__title">
Write me
</div>
<form >
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="kylun-Serg">
<input type="hidden" name="admin_email" value="kylun1serg#gmail.com">
<input type="hidden" name="form_subject" value="popup-form">
<!-- END Hidden Required Fields -->
<input type="text" placeholder="Username" name="Name" required>
<input type="email" placeholder="Email" name = "E-mail"required>
<input type="phone" placeholder="Phone" name = "Phone">
<textarea placeholder="Massage" name="Massage"></textarea>
<button type="submit" class="btn">
Send
</button>
</form>
</div>

when submitting form you can trigger a function
<button type="submit" onclick="myFunction()" class="btn">Send</button>
and function will do hide the modal and display success message and reload the current page.
function myFunction(){
document.getElementById("modal").style.display = "none";
alert('Form submitted successfuly.');
location.reload();
}

jQuery form doesn't validate when button is outside of form tags

I can't seem to get my form to validate when the button is outside the <form></form> tag. Any ideas how I can achieve this? I can't place it inside the form for technical reasons (it's inside a sticky navbar).
My HTML markup:
<form id="frm-shipping" class="frm-shipping" method="post">
<input type="text" name="contact_phone" class="has_validation"
placeholder="Contact phone" value="" data-validation="required"
data-validation-error-msg="this field is mandatory!" >
<input type="text" name="first_name" class="has_validation"
placeholder="First Name" value="" data-validation="required"
data-validation-error-msg="this field is mandatory!" >
</form>
<button class="btn" onclick="nextStep();">Next</button>
And the jQuery code:
function nextStep()
{
$.validate({
form : '#frm-shipping',
borderColorOnError:"#FF0000",
onError : function() {
},
onSuccess : function() {
var params = $( "#frm-shipping").serialize();
// AJAX call here
}
});
}
When I click the button, nothing happens. Simply nothing :( Any suggestions?

You can assign the button to the form with form attribute. See W3Schools example.
<button class="btn" form="frm-shipping" onclick="nextStep();">Next</button>
function nextStep()
{
$.validate({
form : '#frm-shipping',
borderColorOnError:"#FF0000",
onError : function() {
console.log('error')
},
onSuccess : function() {
console.log('te3st')
var params = $( "#frm-shipping").serialize();
// AJAX call here
}
});
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<form id="frm-shipping" class="frm-shipping" method="post">
<input type="text" name="contact_phone" class="has_validation"
placeholder="Contact phone" value="" data-validation="required"
data-validation-error-msg="this field is mandatory!" >
<input type="text" name="first_name" class="has_validation"
placeholder="First Name" value="" data-validation="required"
data-validation-error-msg="this field is mandatory!" >
</form>
<button class="btn" form='frm-shipping' onclick="nextStep();">Next</button>

Try this
$('.btn').click(function(){
Validate method
});

Google spreadsheet website form jQuery script block the sending of

I have my form in html. I copied action, entry keys and hidden inputs from orginal Google Form.
<form id="Gform" role="form" action="https://docs.google.com/forms/d/MY-FORM-KEY/formResponse" method="POST" target="_self" onsubmit="">
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{4,40}$" name="entry.1028663680" value="" id="entry.1028663680" dir="auto" title="What is Your city" class="form-control" placeholder="City" required>
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{5,40}$" name="entry.1220908348" value="" id="entry.1220908348" dir="auto" title="Your complete name" class="form-control" placeholder="Your name" required>
<input type="tel" name="entry.623688995" value="" id="entry.623688995" dir="auto" title="" class="form-control" placeholder="phone" required>
<input type="email" name="entry.1564973803" value="" id="entry.1564973803" dir="auto" title="" class="form-control" placeholder="email" required>
<input type="hidden" name="entry.383122401" value="WEBSITE" id="entry.383122401" dir="auto" title="" class="form-control" placeholder="E-mail" required>
<input type="hidden" name="draftResponse" value="[,,"-9139933475238999509"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fbzx" value="-9139933475238999509">
<button type="submit" name="submit" id="sendData" class="btn btn-default">Submit</button>
</form>
I have te jQuery script, which display confirm:
<script type="text/javascript">
function sendContactForm(){
$("#Gform").fadeOut();
$("#form-container").append('<p class="confirmer">Thanks!<br>Your email was sent.</p>');
};
$('#Gform').submit(function () {
sendContactForm();
return false;
});
</script>
When i delete this script, form is sending, and save to google, but after click submit, I am redirecting to google "Thank You" page. I want to no redirect and display confirm just like in script. How to fix this problem ?

try to use AJAX to acomplish your task, when you will use asynchronous function, there won't be reloading page and you will send data behind the scene. In data object enter all input values, in done() and fail() functions define what to do when you recieve response. Good Luck:)
$('#formID').submit(function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/1PrgHQALlz0WrvwjhGpLrtIgD5aQ1x-8HrOubkxTLNKs/formResponse",
type: "POST",
data: {
'entry.111': $('#entry_111').val(),
'entry.222': $('#entry_222').val(),
// all data from form
}
}).done(function(data){
yourAction(data);
}).fail(function(data){
failAction(data);
});
});

Comment the return false in the code above:
$('#Gform').submit(function () {
sendContactForm();
//return false;
});
Or just delete this line.
What this is script is doing is: subscribing to the submit event and canceling it.
Do you want to do something else?

JavaScript Not Submitting Form

I've spent the last hour or so trawling through here and Google without success. I have a form that I want to submit via POST. The javascript runs and validates fine, it even 'submits' the form. But when it does, it just reloads the page. No POST headers are sent (confirmed using Firebug in Firefox). It's as though it simply reloads the page rather than submitting it.
This form is embedded in the addUser.php page.
<form action="addUser.php" method="post" name="NewUser">
<div data-role="field-contain">
<label label-for="EmpID" class="ui-hidden-accessible">Enter Employee ID</label>
<input name="EmpID" id="EmpID" placeholder="Employee ID" value="" autocomplete="off" title="Enter Employee ID" type="number" required autofocus>
<label label-for="UserName" class="ui-hidden-accessible">Enter username</label>
<input name="UserName" id="UserName" placeholder="Username" value="" autocomplete="off" title="Enter the new username" required>
<p>
<label label-for="NewPass1" class="ui-hidden-accessible">Enter Your Current Password</label>
<input name="NewPass1" id="NewPass1" placeholder="New Password" value="" type="password" autocomplete="off" title="Must be at least 8 characters, with numbers and upper and lower case letters." required>
</p>
<p>
<label label-for="NewPass2" class="ui-hidden-accessible">Enter Your Current Password</label>
<input name="NewPass2" id="NewPass2" placeholder="Verify Password" value="" type="password" autocomplete="off" title="Re-enter your chosen new password." required>
</p>
</div>
<button type="button" name="submitButton" value="submitButton" data-theme="d" data-inline="true" data-icon="check" data-iconpos="left" onclick="validateForm ()">
Add User
</button>
And here is the Javascript:
function validateForm()
{
var reason = "";
reason += validateEmpID();
reason += validateUserName();
reason += validateNewPassword();
if (reason != "") {
alert("There are some errors with the data you entered:\n" + reason);
return false;
} else {
document.NewUser.submit();
}
}
I have tried various different methods of calling submit, all with the same result. Any help greatly appreciated.
Thanks
Gareth

I think it should be
document.forms['NewUser'].submit();
or
document.forms.NewUser.submit();

I think somewhere you are missing adding return false that is the reason your browser is asking for reloading the form. And better way to submit is to use submit button instead of using simple button.

Why not use an AJAX post? Or better yet a jQuery AJAX POST?
$.post(url, data, datatype);
http://api.jquery.com/jQuery.post/

function validateForm(event) {
var reason = "";
reason += validateEmpID();
reason += validateUserName();
reason += validateNewPassword();
if (reason != "") {
alert("There are some errors with the data you entered:\n" + reason);
event.preventDefault();
}
}
document.getElementById('my_form').addEventListener('submit', validateForm, false);

Submitting form with Ajax

So I'm completely lost on how to submit a form with Ajax. I'm fairly new to Javascript and hopefully I'm not in over my head.
When I click submit on my form, nothing happens on my page, not in my SQL database where the info should be stored (double checked process form too).
Here's the code if anyone's willing to help:
Javascript:
$(document).ready(function() {
$('#form').submit(function() {
$.ajax({
url: "../process.php",
type: "post",
data: $(this).serialize()
});
});
});
HTML:
<form name="contact" method="post" action="" id="form">
<span id="input">
<input type="text" name="first" maxlength="50" size="30" title="First Name" class="textbox">
<input type="text" name="last" maxlength="80" size="30" title="Last Name" class="textbox">
<input type="text" name="email" maxlength="80" size="30" title="Email" class="textbox">
<textarea name="request" maxlength="1000" cols="25" rows="6" title="Request"></textarea>
</span>
<input type="submit" value="Submit" class="submit">
</form>

$('#form').submit(function(e) {
e.preventDefault(); //prevents the page from refreshing
var $this = $(this); // cache $(this) for later use
$.ajax({
url: "../process.php",
type: "post",
data: $this.serialize()
});
});
Also could be to do with the dataType property. Or various other things.

I use input type button instead submit button. I validate form field when user click button using click event.When validation pass then call ajax.
something like this,
<input type="button" value="Submit" class="submit">
jQuery(function(){
jQuery('.submit').click(function(){
if(validatemyform()){
//call ajax here
}
});
});