I've read many links and tried many examples but still can't seem to get this working. Any help and suggestions would be most appreciated.
I have one form that needs two actions:
Send an email with all form data to a given user email address (can
do on own host)
Submit all form data to external server (CRM server)
(no edit ability on external server
Upon completion of these two actions, a thank you page will be shown.
My thoughts at the moment are to create two forms (only one will be visible to the user).
HTML form:
<form id="form1" name="form1" action="">
form1: Last Name: <input type="text" name="Last Name" id="Last Name" class="copy" value="from A"/>
</form>
<form id="form2" name="form2" action="externalhost.html">
<input type='text' name='returnURL' value='thankyou.php'>
form2: Last Name: <input type="text" name="Last Name" id="Last Name" class="copy" value="target A" />
</form>
<input id="myButton" type="submit" value="hit me..." >
When the user enters the data and hits submit, all the data will be copied over to the second form.
function form2form(aF1, aF2) {
var selection = "#" + aF1 + " .copy";
jQuery(selection).each(function() {
document.forms[aF2].elements[jQuery(this).attr('name')].value = jQuery(this).val();
});
}
Then submit "form1" to own server to create and send email.
Then submit "form2" to external host to enter into that CRM system. One field in "form2" will be a return URL which will be the thankyou page.
The logical,straightforward method,
jQuery(document).ready(function() {
jQuery('#myButton').click(function() {
form2form ('form1', 'form2' );
jQuery('#form1').submit();
jQuery('#form1').submit();
});
});
unfortunately, doesn't work.
My current jquery code also isn't working.
jQuery(document).ready(function() {
jQuery("#myButton").livequery('click', function() {
var form = jQuery("#form2");
var action = form.attr("action");
var serialized_form = form.serialize();
jQuery.post(action, serialized_form, submit_first);
});
});
function submit_first(val) {
jQuery("#form1").submit();
}
If you can direct me towards a workable solution, it would really help. I've been having headaches over this one for far too long.
Don't reinvent the internet. Use jQuery.ajax() to send the data to your server. Then Transfer over to the external server.
What I would do is submit the form via ajax to both servers.
Something like:
jQuery("#form1").submit(function() {
data = jQuery(this).serialize();
jQuery.post('internal_server', data);
jQuery.post('external_server', data);
//redirect to thank you page, etc.
return false; // Prevent normal form submission
});
Related
I'm using a nocode API that returns some HTML based on some parameters in the URL when the user makes a GET request. I'd like to improve the user experience and have a form like a contact 7 form that can map user input for each form field in the call to API.
For example form would look like following:
Name: Todd
Email: todd#gmail.com
Key: zjdHSDFHSDFHSDFS
My API is example https://api.com/endpoint/v1/
When the user enters name, email and key I need to make a call like this:
My API is example https://api.com/endpoint/v1?name={name}&email={email} with the Key field passed in as a header (X-BLOBR-KEY: {key})
I couldn't figure out how to do this with javascript or with a wordpress plugin.
Here is some code. It is a generic HTML form and a custom submit function in vanilla JavaScript placed inside the head tag. I think it achieves what you want besides the header.
It is not possible to perform an HTTP redirect with headers, read more here. An alternative would be to perform an async request then if it returns HTML you could replace the existing HTML with the new HTML. This is a bit of hacky approach in my opinion.
As it stands, I'm not sure what value a header like this would be adding. If it's hard-coded into the HTML/JavaScript anyone could see it, manipulate it, or use it on their own form to spoof yours. To avoid this you could look into using PHP. I know W3 has resources for HTML forms with PHP.
<html>
<head>
<script>
function submitFunction(e) {
// Prevent the default form submitting actions to occur
e.preventDefault();
e.stopPropagation();
// Get the form
let form = document.querySelector("#myForm");
// Get all field data from the form
let data = new FormData(form);
// Convert key-value pairs to URL parameters
let params = new URLSearchParams(data);
// Build the endpoint URL
let newUrl = `https://api.com/endpoint/v1?${params}`;
// Send to endpoint URL
window.location.href = newUrl;
}
</script>
</head>
<body>
<h2>HTML Form</h2>
<form id="myForm" onsubmit="submitFunction(event)">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I want users to be able to enter custom amounts in order to be redirected to paypal. I already have a form for myself to generate payment links that then generate buttons to be sent there but I want a client form to automatically send them to PayPal.
The user should fill out the form and then be sent to paypal.me/username/12 if 12 was the entered amount entered.
function process()
{
var url="https://paypal.me/username/" + document.getElementById("url").value;
location.href=url;
return false;
}
<form onsubmit="return process();" autocomplete="off">
<input type="text" name="pay" id="payamount" autofocus="">
<br><br>
<input type="submit" value="Make Payment" id="pay">
</form>
It does send the user to PayPal but to paypal.me/username/?pay=12 when it needs to be paypal.me/username/12 Not too sure how to fix this but help would be appreciated.
Thanks in advance.
This is where the problem is:
var url="https://paypal.me/username/" + document.getElementById("url").value;
where is the element with "url" id?
Now with regards to this:
It does send the user to PayPal but to paypal.me/username/?pay=12 when
it needs to be paypal.me/username/12 Not too sure how to fix this but
help would be appreciated.
The reason you're getting ?pay=12 is because your form is by default submitting with get method and that is how properties are embedded into your submitted url. so pay is the name attribute value of the payamount element.
By understanding your code, below is what should happen:
target the id="payamount" input and not id="url" which does not exist on the html you provided.
var url = "https://paypal.me/username/" + document.getElementById("payamount").value;
I am trying to make my website first ask Simple data and than continue loading the page, but I can't figure it out.(so first ask data and than print PRINT THIS AFTER)
this is what I have now:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
clearInterval(i)
}
}, 100);
</script>
<h1>PRINT THIS AFTER</h1>
please help me
-------------EDIT----------------
I decided to use innerHTML to edit the html in a div with the id edit so it wont load the html yet
Code:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("edit").innerHTML = "<h1>PRINT THIS AFTER</h1>";
clearInterval(i)
}
}, 100);
</script>
<div id="edit">
</div>
I've read the other replies here and your comments. As others here suggested, the easiest way to do this would be to either hide the H1 or put the H1 in a hidden div, and you can then show that div via your "sendIt" function with Javascript if the login was successful. For what it's worth, you can't "pause" a site from loading content. Anything embedded in the HTML is going to load regardless of what Javascript is doing.
If hiding the content is not good enough (maybe for security reasons, you don't want to show someone content unless they are signed in, as hiding it would still let them view the source), there's only two other ways to do this. The first is server side programming. Post to the same page and if the login conditions exist, show the content instead of the login form.
The second method you can use an AJAX request. If the login is successful, you can dynamically load content from another web page on your server that contains the content you want to show. Note, the page you are dynamically loading should have some type of security (like server side programming) that validates if the person is logged in, otherwise you're back in the same hole, same goes for the server side method. If the content or AJAX page isn't validated in some way, they will find a way to view it anyway.
This problem is a little steeper than what you are asking us, but there are plenty of tutorials out there on a simple AJAX request or using server side programming languages like PHP. Now that you have an idea of how to do this, you can start experimenting.
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("h1show").removeAttribute("hidden");
clearInterval(i)
}
}, 100);
</script>
<h1 id="h1show" hidden>PRINT THIS AFTER</h1>
Use hidden attribute on the h1, and then just remove it by :
document.getElementById("h1show").removeAttribute("hidden");
and it will show up.
Your form making submit when you press on button then page refresh is happen and you see your form again.
If you want to make request without page refresh you should return false on submit and have to use AJAX technology.
You can use CSS to show\hide your site content or backend to control your HTML.
If you want that your HTML will not contain a site content, after login make redirect to page with cookie checking or load a site content via AJAX.
get necessary info
login.html
<h1>PRINT THIS BEFORE</h1>
<form id="login" action="data.html">
name: <input id="name" type="text" required>
password: <input id="password" type="password" required>
<button type="bubmit">log in</button>
</form>
if prev page contains required info send to new page
data.html
<h1>PRINT THIS AFTER</h1>
I have a basic HTML form with one input text field, along with a submit button. Now, I want to use JavaScript to display the content entered by the user in the text field after form submission.
Here's the code of my form:
<form method = "POST">
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" onclick = "postResul()" />
</form>
On clicking the submit button, the postResul() function is called:
<script>
function postResul()
{
var htmlString="<?php echo $_POST['tweet1']; ?>";
alert(htmlString);
}
</script>
Now, both these code snippets are stored inside a PHP file. However, on submitting the form, the data entered in the input form field doesn't get displayed. I'm displaying the $_POST['tweet1'] variable in order to display the entry submitted by the user.
What seems to be wrong here? Am I using the $_POST variable in PHP the wrong way?
If you want to display the input's value BEFORE sending it to your server:
document.querySelector("form").addEventListener("submit", function()
{
var value = this.querySelector("input[name='tweet1']").value;
alert(value);
return false; //disable sending the data to the server
}, false);
<form id="myForm" method="post" action="index.php">
<input type="text" name="tweet1" />
<br>
<input type="submit" />
</form>
If you want to display the input's value AFTER sending it to your server:
<form method="post" action="index.php">
<input type="text" name="tweet1" />
<br>
<input type="submit" />
</form>
<?php echo htmlspecialchars($_POST["tweet1"]); ?>
These are different things. You can use $_POST only after you've sent some datas to the server. When you open yoursite.com/index.php in your browser, you make a HTTP GET request. In this case, $_POST will be an empty array, since it's a GET request, no data is sent to the server. When you submit the form, you make a HTTP POST request. Your PHP can access only that data you sent to the server. With Javascript, you work on the visitor's computer, not on the server. The only one way to send the data to the server without refresing the page, if you use AJAX, and make a new HTTP POST request, that'll run in the "background". But you do not need this if you just want to display the input's value, and you don't want to save it on your server. That can be done with Javascript, and without PHP.
The code you posted above would work like this:
You make a HTTP GET request to yoursite.com/index.php.
No data is sent to the server, $_POST will be empty.
var htmlString="<?php echo $_POST['tweet1']; ?>"; In this line, you try to echo an non-existing member of $_POST, you might see an error if display_errors is not disabled.
You click on the submit button.
It has an onclick attribute, postResul (a Javascript function) is called. If you open the page's shource, you'll see this:
function postResul()
{
var htmlString="";
alert(htmlString);
}
After an empty popup is shown, and you press OK, the browser send the data to your server, and you'll able to acess the input's value via $_POST.
If you press the submit button again, you'll see submited value (and not the input's actual value), because if you open the source code, you'll see this:
function postResul()
{
var htmlString="entered data";
alert(htmlString);
}
But that isn't want you want, so see the examples above depending on what you want (save the data, or just display it in the browser).
This should work:
function postResul()
{
var htmlString=document.getElementsByName("tweet1")[0].value;
alert(htmlString);
}
But you should really read more on how client-side and server-side languages work.
You cannot use $_POST['tweet1'] to get the value when you are invoking a Javascript function. Basically client side and server side are totally different.
You can obtain the result using Javascript as:
function postResul()
{
var htmlString= document.getElementsByName("tweet1")[0].value;
alert(htmlString);
}
In HTML:
<form method = "POST">
<input type = "text" name = "tweet1"/>
<br>
<input type = "submit" onclick = "postResul()" />
</form>
Note: The above function runs in client side and not in server side.
$_POST can be used to get values of the submitted form in a php page.
Cheers.
You have to make another file. Change your code to:
<form method="POST" action="another.php" >
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" />
</form>
In file another.php you can show the variable then:
<?php echo htmlspecialchars($_POST['tweet1'], ENT_QUOTES, 'UTF-8'); ?>
You should use the form in a different way
<form method="POST">
<input type = "text" name = "tweet1" />
<br>
<input type = "submit" />
</form>
test.php file
<?php
return json_encode([1, 2, 3]);
js
$('form').on('submit', function() {
$.post('test.php', {}).done(function(response) {
alert(response);
})
})
Something like this.
Hope it's useful.
if you are using jquery library you can do this
<form method="POST">
<input type = "text" name = "tweet1" class="tweet" />
<br>
<input type = "submit" class="submit" />
</form>
$('.submit').click(function(e){
alert($('.tweet').val());
e.preventDefault();
});
jsfiddel working example http://jsfiddle.net/mdamia/j3w4af2w/2/
I want to make a form auto click based on referrer site..
My url is http://example.com/from/
<form action="" method="post">
<input name="name" value="Jhon" type="text">
<input name="email" value="address#example.com" type="email">
<input name="age" value="28" type="text">
</form>
What I would like, is that when a user come from a certain URL the form will automatically be submitted (auto-clicked). However when the user comes directly to this page, or from a specific site (such as my own) the form will not be submitted.
Is it possible to do this?
Try using:
string = document.referrer;
For more information on this, you should see this for more information concerning this.
After you have gotten the URL, you need to decide what to do with it. You can use document.ready:
$( document ).ready(function() {
//logic
});
Make something that x has the value of "example website" then do:
$("#form_id").submit();
Else do nothing.
Also, this might be a duplicate of this except that this user purely needs a function to run on the document being finished. Finally this solution needs Jquery.
You should use "match" function to submit the form when the user came from any page of the site anything.com
$(document).ready(function(){
var uri = document.referrer;
if (uri.match(/anything.com/)){
$("#yourForm").submit();
}
});
Something like this?
if (document.referrer == "certain_url")
$("#form_id").submit();