Develop Reference

How to redirect to a certain page after submitting a form

I have a form when you submit it , it will send your inserted data as an email to someone . Then the page redirects you to the Home page .
What I want is to prevent the redirection that the server side does. and I need to be able to choose where to redirect after submitting the form not the server side .
So what I did , I used Javascript to prevent the redirection then i determined where to go after submitting .
Here's the form
$("#CustomerEnquiryForm").submit(function (e)
{
e.preventDefault();
// My redirection //
if (window.location.href.indexOf("nodeId") > -1)
{
window.location = "/en/our-service/"
}
else
{
window.location = "/en/"
}
});
<form id="CustomerEnquiryForm" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<label for="first_name">First Name</label>
<input id="first_name" required="required" name="first_name" type="text" />
<br>
<label for="last_name">Last Name</label>
<input id="last_name" required="required" name="last_name" type="text" />
<br>
<label for="company">Company</label>
<input id="company" required="required" name="company" type="text" /><br>
<label for="phone">Phone</label><input id="phone" name="phone" type="text" />
<br>
<label for="mobile">Mobile</label>
<input id="mobile" required="required" name="mobile" type="text" />
<br>
<label for="email">Email</label>
<input id="email" required="required" name="email" type="text" /><br>
</form>
I could prevent the server redirection . and my redirection works .. but the main issue .. the form doesn't send emails anymore .
How to solve this issue ?
Thanks .

Try this
$("#CustomerEnquiryForm").submit(function(e) {
e.preventDefault();
$.post("https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8", $(this).serialize() , function(data, status) {
console.log(data);
console.log(status);
var obj = JSON.parse(data);
//Read the server response here
// My redirection //
if (window.location.href.indexOf("nodeId") > -1) {
window.location = "/en/our-service/"
} else {
window.location = "/en/"
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CustomerEnquiryForm">
<label for="first_name">First Name</label>
<input id="first_name" required="required" name="first_name" type="text" />
<br>
<label for="last_name">Last Name</label>
<input id="last_name" required="required" name="last_name" type="text" />
<br>
<label for="company">Company</label>
<input id="company" required="required" name="company" type="text" /><br>
<label for="phone">Phone</label><input id="phone" name="phone" type="text" />
<br>
<label for="mobile">Mobile</label>
<input id="mobile" required="required" name="mobile" type="text" />
<br>
<label for="email">Email</label>
<input id="email" required="required" name="email" type="text" /><br>
<button type = "submit">Submit</button>
</form>

You could use jQuery for sending the form thru AJAX.
With it, instead of submitting the page and redirecting to the submitted URL, you can send the data in the background, take the response and do redirection accordingly.
$.ajax({
type: "POST",
url: url, //url where you want to send the data
data: data, //somehow bind the input data to the variables and pass it
success: someFunction, //you will get the response from server in this function
dataType: 'JSON'
});
You can know more about AJAX here
Another option is to send the response in the link of your home URL, something like this
https://example.com/?red=somelink.com
and then redirecting it from the client side using javascript.

I could prevent the server redirection . and my redirection works .. but the main issue .. the form doesn't send emails anymore .
you need to manually send the data with ajax.
https://developer.mozilla.org/en-US/docs/Web/API/FormData
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
// after e.preventDefault()
const xhr = new XMLHttpRequest ;
xhr.open("POST","https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8")
const formData = new FormData(document.getElemetById('CustomerEnquiryForm'))
xhr.send(formData)
xhr.onreadystatechange = function(){
if( xhr.readyState === xhr.DONE && xhr.status === 200){
// read server response
console.log(xhr.reponseText)
// redirect here
}
}
or do the redirection serverside if you control the server.

How to send post to 2 different actions?

I have some HTML and Javascript code that sends a form using method=post to an action="www.randomaction.com/randomaction.php".
Now I want to see exactly how it sends it to the action by also sending it to my mail (the same post), however I don't want to have the site open the users mail client to do this, I want it to send from my gmail account to my other gmail account.
my code looks like this:
<form action="http://www.randomaction.com/shared/AddClient/index.php" class="form hod-hasharon" data-name="Email Form Hod Hasharon" data-redirect="http://www.kbanim.com/landing-pages/thank-you" id="wf-form-Email-Form-Hod-Hasharon-2" method="post" name="wf-form-Email-Form-Hod-Hasharon" redirect="http://www.kbanim.com/landing-pages/thank-you">
<div class="w-embed w-script">
<script type="text/javascript" language="JavaScript">
<!--
var MediaTitle= document.URL;
if(MediaTitle.includes("facebook"))
{
MediaTitle= "facebook";
}
if(MediaTitle.includes("googles"))
{
MediaTitle= "google search";
}
if(MediaTitle.includes("googlem"))
{
MediaTitle= "google media";
}
if(MediaTitle.includes("googler"))
{
MediaTitle= "google remraketing";
}
document.write('<input type=hidden data-name="MetaTitle" id="MetaTitle" name="MetaTitle" required="required" ');
document.write(' value="' + document.URL + '">');
document.write('<input type=hidden data-name="Password" id="Password" name="Password" required="required" value="jkq0105">');
document.write('<input type=hidden data-name="ProjectID" id="ProjectID" name="ProjectID" required="required" value="6661">');
//-->
</script>
</div>
<input class="_3 hod-hasharon text-field w-input" data-name="Fname" id="Fname" maxlength="256" name="Fname" placeholder="שם מלא:" required="required" type="text">
<input class="_2 hod-hasharon text-field w-input" data-name="Phone" id="Phone" maxlength="256" name="Phone" placeholder="טלפון:" required="required" type="text">
<input class="hod-hasharon text-field w-input" data-name="Email" id="Email" maxlength="256" name="Email" placeholder="מייל:" required="required" type="email">
<input class="submit-button w-button" data-wait="שולח..." type="submit" value=" שליחה >>">
</form>
Any suggestions?
Thank you in advance!

The method POST doesn't send anything visible to the page.
Your POST information will be available in a PHP array in your PHP file :
$_POST
If you want to access a single value from your form :
$_POST['yourInputID']

Submit 2 forms at once

I want to submit both forms after click 2nd form's submit button.
The hardest part is that action is pointing to a php file with which send an e-mail to the client. I do not want to get 2 e-mails.
Both form data should reach that php file at the same time.
this is 1st form:
<form class="generalForm" id="form1" action="reservationSend.php" method="post">
<input id="datepicker-example3" type="text" name="datepicker-example3" value="Check In">
<input id="datepicker-example2" type="text" name="check_out" value="Choose Out">
<select name="RoomType">
<option selected="selected" value="0">Room Type</option>
<option value="Deluxe">Deluxe</option>
<option value="Family">Executive</option>
<option value="Conference">Conference</option>
</select>
</form>
This is the second form:
<form id="form2" class="generalForm" method="post" action="reservationSend.php" onsubmit="return submitForm()">
<input type="text" name="name" placeholder="Your Name" />
<input type="text" name="email" placeholder="Your email" />
<input type="text" name="tp" placeholder="Your Phone Number" />
<input type="text" name="Country" placeholder="Your Country" />
<textarea name="message" placeholder="Your Message"></textarea>
<input type="submit" name="submit" value="submit">
</form>
My javascript, myjscript.js:
function submitForm() {
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}

Example submitting a form with AJAX & jQuery.
$('#formID')
.on('submit', function(e){
e.preventDefault(); //disable default submit action
var postData = {
'name' : $('input[name="name"]').val(),
'email' : $('input[name="email"]').val()
//etcetera
};
$.post(
'reservationSend.php',
postData,
callBack(returnData){
doStuffWith(returnData);
//add callback functionality
},
'json' //or any other datatype. In this case postData is a JS object, which gets submitted as JSON string
);
//You could even trigger the submission of another form here:
$('#otherForm')
.trigger('submit');
//This will trigger the submission of #otherForm
});
$('#otherForm')
.on('submit', function(e){
e.preventDefault();
//logic for form submission.
});
You can find documentation on the jQuery AJAX methods here. You'll also find serialize() and serializeArray() there. 2 Methods which can turn a form into a JSON string.

Close pop up form once submitted

Can someone help me out here, i have a form which pop ups after a min on a video page, i want the form to close by itself once its submitted so the video could continue, how this is possible with jQuery?
this is my form
<ul class="mktLblLeft">
<div class="txt-fld">
<label>First Name:</label><span class="mktInput"><input class="mktFormText" id="Email" maxlength="255" name="24132" tabindex="1" type="text" value="" />
</span></li>
<label>Last Name:</label><span class="mktInput"><input class="mktFormTex" id="FirstName" maxlength="255" name="24134" tabindex="2" type="text" value="" /></span></li>
<label>Email Address:</label><span class="mktInput"><input class="mktFormText" id="LastName" maxlength="255" name="24136" tabindex="3" type="text" value="" />
</div>
<div class="btn-fld">
<button type="submit">Sign Up »</button>
i have tried this code, is there something wrong with this?
function closeSelf(){
// do something
if(condition satisfied){
alert("conditions satisfied, submiting the form.");
document.forms['certform'].submit();
window.close();
}else{
alert("conditions not satisfied, returning to form");
}
}

An easy way to to this would be to use hide() when the button is clicked.
<button type="submit" onlick="$('#myForm').hide()">Sign Up »</button>
Assuming this is inside a <form id="myForm">

Here's a jQuery AJAX solution:
jQuery('button#yourSubmitButton').on('click', function(event) {
// prevent normal submit
event.preventDefault();
// call ajax submit
jQuery.ajax({
type: "POST",
url: "bin/yourprocess.php",
success: function() {
// fadeout the form
jQuery('.mktLblLeft').fadeOut();
},
error: function() {
// give feedback to user
alert('something went wrong!');
}
});
});

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
}
});
});