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']
Related
I have created a form requiring email validation. So user must type in their email address twice and if they don't match they won't be able to submit. I did this by simply comparing the values of email fields 1 and 2. If they match "disabled" is removed from the submit button.
All was working perfectly when I had the value set to "Insert your email address and "confirm your email address again". However, so that the user does not have to delete that text, I removed the value and used "placeholder" in the HTML instead.
The problem now is that the moment you type anything it's returning as true. I guess it's seeing the blank values as the same, but it's not picking up on the changes to the value as the user types it in.
Why are the two fields always returning as a match?
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="text" id="email1" class="fields" name="email" placeholder="Email Address" >
<input type="text" id="email2" class="fields" placeholder="Confirm Email Address" >
<input name="submit" id="submit" class="fields" type="submit" disabled value="Email Addresses
Do Not Match">
</form>
<script>
function verify (){
console.log(`email1.value: ${email1}: Email2: ${email2}`);
if(document.getElementById("email1").value === document.getElementById("email2").value) {
document.getElementById("submit").removeAttribute("disabled");
document.getElementById("submit").style.backgroundColor = "#004580";
document.getElementById("submit").style.cursor = "pointer";
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
}
}
$(".fields").on("change paste keyup", verify);
</script>
</body>
</html>
try this
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="text" id="email1" class="fields" name="email" placeholder="Email Address" >
<input type="text" id="email2" class="fields" placeholder="Confirm Email Address" >
<input id="submit" type="button" onclick="verify()" value="click">
</form>
<script>
function verify()
{
if(document.getElementById("email1").value === document.getElementById("email2").value) {
alert("matched")
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
alert("not matched")
}
}
</script>
</body>
</html>
This worked for me:
Change the email inputs to [type='email'].
Add the required attribute to #email1.
Add a check to the validity of #email1 in your conditional.
Reset styles to initial (or what you prefer) if the button is reset back to 'disabled'.
Use 'input' event to get the the values updating on every keystroke, 'change' only fires on 'blur' or when the form is submitted.
It'd end up looking like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="email" id="email1" class="fields" name="email" placeholder="Email Address" required>
<input type="email" id="email2" class="fields" placeholder="Confirm Email Address" >
<input name="submit" id="submit" class="fields" type="submit" disabled value="Email Addresses Do Not Match">
</form>
<script>
function verify (){
console.log(`email1: ${email1.value}: Email2: ${email2.value}`);
if(document.getElementById("email1").checkValidity() && document.getElementById("email1").value === document.getElementById("email2").value) {
document.getElementById("submit").removeAttribute("disabled");
document.getElementById("submit").style.backgroundColor = "#004580";
document.getElementById("submit").style.cursor = "pointer";
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
document.getElementById("submit").style.backgroundColor = "initial";
document.getElementById("submit").style.cursor = "initial";
}
}
$(".theForm").on("input paste keyup", "input[type=email]", verify);
</script>
</body>
</html>
MDN Docs for input and change events:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
Instead of:
$(".fields").on("change paste keyup", verify)
Try:
$(".fields").blur(verify)
EDIT:
How about:
$("#email2").blur(verify)
?
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.
Hello I am developing a contact form which will give the user ip and geo location details while they send me the message from my website, But the php code $ip = $_SERVER['REMOTE_ADDR']; is not showing the actual vistor ip, I have tried with many php functions they are working fine on other hosts but in my host it's not properly showing the client ip So I have decided to get the ip using JavaScript and then when my visitors will submit the contact the form to sent.php page the ip which I got from the JavaScript will be input with the form to get the POST value from it then I can process that variable and get the geo location and other information and send it along php mail.
Here is the javascript to get the actual user ip
<script type="application/javascript">
function getIP(json) {
document.write("My public IP address is: ", json.ip);
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
And my email contact form is
<form name="contact" class="select-style" action="sent.php" method="POST" >
<p>Hello
<select name="recipient">
<option value="recipient_0" selected>Please Select Recipient !</option>
<option value="recipient_1">Sales</option>
<option value="recipient_2">Support</option>
</select>
</p>
<label for="email">Your Message : </label>
<textarea name="message" value="Your Message" id="message" ></textarea>
<p>Regards,</p>
<label for="name">Name: </label>
<input type="text" name="name" value="" id="name" />
<label for="email">Email: </label>
<input type="text" name="email" value="" id="email" />
<input type="hidden" name="ip" value="">
<input type="submit" name ="submit" value="OK I want to send it now, thanks!" />
</form>
And I think this is how I should input the ip with the form
<script type="text/javascript">
jsvar= json.ip;
document.contact.ip.value = jsvar;
</script>
But it's not giving the result I want. Please help.
Solved the issue.
I just need to insert these JavaScript codes after the hidden input in <from>
<input type="hidden" name="ip" value="" id="ip" />
<script type="text/javascript">
var userip;
</script>
<script type="text/javascript" src="https://l2.io/ip.js?var=userip"></script>
<script type="text/javascript">
document.getElementById("ip").setAttribute('value', userip);
</script>
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?
I have created an app on fb, and want people to sign up for it. I want whoever signs up, the details should be sent to my Salesforce form using Web-to-lead form.
Salesforce provides a code(javascript form) to send data. This code works fine if I compile it on my browser.
But if I paste this code in my app on facebook, the entries are not posted to salesforce.
Can somebody suggest what changes should be made? Can this be done using JSON and AJAX?
I wrote this code (referred the link given in comments), but the code does not seem to be work. This code does not give any output!
<html>
<script type="text/javascript">
function funct()
{
var first_name= myForm.first_name.value;
var last_name=myForm.last_name.value;
var email=myForm.email.value;
alert(first_name);
var $form = $(myForm, {
method: "POST",
action: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
target: "my-iframe"
}).appendTo("body");
var $iframe = $("<iframe>", {
name: "my-iframe"
}).bind( "load", function () {
$('.error').hide();
$('.success').slideDown('slow');
$('form#callToAction').fadeOut('slow');
$iframe.remove();
$form.remove();
}).appendTo("body");
$.each(("first_name=" + first_name + "&last_name=" + last_name + "&email=" + email + "&oid"= + "00Di0000000JbNJ").split("&")), function (index, value) {
var pair = value.split("=");
$form.append("<input>", {
type: "hidden",
name: pair[0],
value: pair[1]
});
});
$form.submit();
}
</script>
<b> You just need to share your name and email address!! </b> <br>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!--<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">-->
<input type=hidden name="oid" value="00Di0000000JbNJ">
<input type=hidden name="retURL" value="http://">
<form name="myForm" onSubmit="return funct()" >
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<input type="Submit" onSubmit="funct();" value="Submit"></input>
</form>
You can do this. I have posted to Salesforce web to lead using just an HTTP post via C# so doing it with an ajax call should work. Check out this post in the salesforce forums and see if it helps.