I am trying to send a form to 2 different processors. One is a 3rd party cloud database that I do not control nor have the code for. The other my simple contact form processor. I was trying something like:
<form action="mail.php" method="POST">
<input name="name" type="text" />
<input type='submit' name='submit' onclick="this.form.action="//3rdpartcloud.com";" />
From what I understand this wont work because it leaves the page on the 1st action and cant do the 2nd action.
I have seen Ajax suggestions, but no clear example. But as I will be sending the same variables to both files, I was thinking it would be easier to POST all variables to my php form, and then from my php to automatically POST them to the 3rd party server. I do not know how they process the data so I want to send it as form values not as variables.
Is there a simpler way to achieve this? What is the correct syntax? I'm guessing something like this in the php:
<form action="site.com" method="POST">
<input name="name" value=$name>
But even if that works - how do I auto send it to an action url?
First sumit your form using ajax to your own site - then submit the form to the other site as usual.
Your Ajax - something look something like this:
<form id="form" action="theothersite.php" method="POST">
<input name="name" type="text" />
<input type='submit' id="submitbutton" />
</form>
<script type="text/javascript" >
$('#submitbutton').click(function(e){
e.preventDefault(); //stops form submission
$.ajax({
type: "POST",
url : '/yoursiteurl.php',
data: $('#form').serialize(),
success: function(data){
$('#form').submit(); //now submit the form
}
});
})
</script>
In your PHP do a:
print_r($_POST);
To see the submitted values
Related
I have an html form on my site, so that users can subscribe to my mailing list. I'm using getResponse to build my list and send out automated emails. To do this, I put "https://app.getresponse.com/add_subscriber.html" into the action attribute of my form. Here is a simplified version of my form:
<form action="https://app.getresponse.com/add_subscriber.html" method="post">
<input type="text" name="name" id="name" class="required">
<input type="email" name="email" id="email">
<input type="submit" name="submitBtn" value=“Subscribe”>
</form>
I also have a send.php file to insert user information into a MySQL database on my server. But since I can only specify one file in the action attribute, I don't know have to execute both getResponse script and my own script when the user clicks on Subscribe.
Basically I want to achieve the following behavior: When somebody clicks on "Subscribe", their information should get send to getResponse into my mailing list AND into the MySQL DB on my server.
I have spend hours looking online, I haven't found anything that works.
Thank you in advance.
Give your form an id say myForm
<form action="https://app.getresponse.com/add_subscriber.html" method="post" id="myForm">
Then intercept the form's submit event and prevent the submission to app.getresponse.com, instead call ajax to your send.php passing the form data and once send.php returns submit the form to app.getresponse.com
<script>
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
e.stopPropagation();
//don't submit now
//do ajax first
$.ajax({url: '/send.php', method: $("#myForm").attr('method'), data: $("#myForm").serialize() , success: function(){
$("#myForm").submit(); //now submit to app.getresponse.com
}});
});
});
</script>
i want to get the values from a form before its action redirect it.
for example in this form, i want to grab the "text_one" and send it to database before it be redirected to google. I also want "text_one" in google too.what should i do?
<form method="post" action="google.com">
<input type="text" name="text_one">
<input type="submit">
</form>
try this ...
<form method="post" onsubmit="return getdata()" action="google.com">
<input type="text" name="text_one" id="text_one">
<input type="submit">
</form>
<script>
function getdata(){
var txtOne = document.getElementById('text_one').value;
// Do Something
}
</script>
You can change the action to "yourscript.php" and do s.th. like:
<?php //yourscript.php
//save $_POST['text_one'] to Database
header('Location: http://google.com');
?>
Or you can call the "yourscript.php" with ajax to do it in the background.
Try this :
echo (isset($_POST['text_one']) ? $_POST['text_one'] : '');
or Use Ajax Ajax is the answer of your question
For a pure PHP solution, you can work with the idea presented by #v.eigler. In order to create a POST request to a Google server (or what ever server you want), you just need to use some library to make the HTTP request, I strongly recommend you to take a look at the Guzzle library.
Using this should be easy enough, you just need to redirect the form handling to a script that you own, do your own processing and then create an HTTP post to the real destination.
I do it with little complexity.
I change your form action handler.
<form method="post" action="yourscript.php">
<input type="text" name="text_one">
<input type="submit">
</form>
Now, Its time to handle it server side. I have put comments for explanation.
<!-- yourscript.php -->
<?php
echo $_POST['text_one'];
// also do required server side operation.
?>
<!-- note: Action part is google.com -->
<form id="myform" method="post" action="google.com">
<!-- Note: value of input already set.-->
<input type="text" value=<?php echo $_POST['text_one'];" ?> name="text_one">
<input type="submit">
</form>
<script language="JavaScript">
// submit your form as soon as page loaded.
document.myform.submit();
</script>
I want to pass a GET parameter to a PHP file , by data typed in a text field. I want something like this :
<form id="Form1" action="action.php?nameExample=textFieldData" method="get">
the textfield is out of this form that's why I need to affect the value of the textfield into get PHP parameters so I can send it with another data in the same msg
the textfield code :
Username: <input type="text" name="nameExample"><br>
anyway to do it ?
You can't use $_GET parameters in an HTML form action attribute if the <form method='get'. Use <input type='hidden' name='nameExample' value='whatever' />, or better yet, use AJAX without a form.
This should do what you want to. The JS code copies the value of an external input field to a hidden input field.
HTML:
<form action="action.php" method="get" id="Form1">
<input type="text" name="otherData" value="xxx">
<input type="hidden" name="nameExample" value="" id="nameExampleCopy">
<input type="submit">
</form>
Username: <input type="text" name="nameExample" id="nameExampleOriginal">
JS:
document.getElementById('Form1').addEventListener('submit', function () {
var originalElement = document.getElementById('nameExampleOriginal');
var hiddenElement = document.getElementById('nameExampleCopy');
hiddenElement.value = originalElement.value;
});
But you should think about some points:
Is get the right method here? It sounds like post could be better.
Is it semantically a good idea to pass a value from outside the form inside it? We don't know your application, but generally it is a good idea to have all submitted data inside the form. As HTTP pointed out in his comment, sessions could also help with that.
I have recently just begun using JQuery and AJAX. I am practicing using JQuery to grab form values upon form submit and using AJAX to process the data with a PHP script. It all works really good, that is, until I add another form to the page. No matter what form I submit, the data from the first form on the page gets submitted. How can I select only the form and values from the form that is being submitted?
Here is my code:
<html>
<head>
<title> JQUERY and AJAX </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- JQUERY script to submit the form without page refresh !-->
<script>
$(document).ready(function() {
$("form").submit(function() {
var name = $("input#name").val();
var dataString = 'name='+ name;
$.ajax({
type: "POST",
url: "ajax_submit.php",
data: dataString,
});
$("input#name").val("");
return false;
});
});
</script>
</head>
<body>
<form name="form" action=""/>
<input type="text" name="name" id="name" autocomplete="off"/>
<input type="submit" name="submit" id="submit"/>
</form>
<form name="form" action=""/>
<input type="text" name="name" id="name" autocomplete="off"/>
<input type="submit" name="submit" id="submit"/>
</form>
</body>
</html>
Thanks!
Do you know how to use css selectors? You can use css selectors as jquery selectors. Meaning, if you give each form an id attribute, you can choose it later like this :
$('#the_forms_id').submit();
Where form id is an html attribute you chose for the form, like this
<form name="form" action="" id = "the_forms_id"/>
Just use php to set different form id's
Also, note you can use almost any css selector you can think of, and also jquery specific selectors. You can see them here.
If you don't know how to use basic selectors, use this guide.
If you want to choose a dynamically created form (like you commented),
implementation depends on which way the form is added and how it needs needs to be captured.
You can use php to give them different ids, dynamically (use a counter for example).
Also, you can use jquery selectors to choose the first or last element (or any other), when there are a few elements present. Check out the :last selector :
$('form :last').serialize().submit()
I have been reading through lots of Q&A everywhere and these stackoverflow posts seem to be most related to what I am trying to do:
1) How we can save data on two servers using one sumit form?
2) How to call server side action method just before submitting form to 3rd party url?
Basically, I am working with Aweber autoresponder service and I have been having some technical trouble where the leads don't seem to record in Aweber even though I see on my analytics software people are filling in the forms with emails and hitting the submit button.
So, I was hoping I can and capture the form data on my server first in a TXT file, before the form data gets submitted to Aweber.
(from my research I need ajax, jquery to achieve this)
Following different posts and tutorials, I have come up with the following but unfortunately is still not working...
Please let me know how to fix this code if possible. THANK YOU so MUCH!!!
Head with jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//if submit button is clicked
$('#submit').submit(function () {
//Get the data from all the fields
var email = $('input[name=email]');
var custom_sub1 = $('input[name=custom sub1]');
var custom_sub2 = $('input[name=custom sub2]');
var custom_sub3 = $('input[name=custom sub3]');
//organize the data properly
var data = 'email=' + email.val() + '&custom_sub1=' + custom_sub1.val() + '&custom_sub2='
+ custom_sub2.val() + '&custom_sub3=' + custom_sub3.val();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "http://mydomain.com/form_plus_email.php",
//method
type: 'POST',
//pass the data
data: data,
//Do not cache the page
cache: false,
success: function() {
}
});
//cancel the submit button default behaviours
return false;
});
});
</script>
</head>
The above, I don't know if "return false;" is causing the problems
Body with form:
<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input type="text" name="email" value="Enter email" id="email">
<input value="xxxxxxxxxxxx" name="meta_web_form_id" type="hidden">
<input value="" name="meta_split_id" type="hidden">
<input value="xxxxxxxxxxxxx" name="listname" type="hidden">
<input value="http://domain.com/thankyoupage" name="redirect" type="hidden">
<input value="http://domain.com/thankyoupage" name="meta_redirect_onlist" type="hidden">
<input value="xxxxxxxxxxxxx" name="meta_adtracking" type="hidden">
<input value="1" name="meta_message" type="hidden">
<input value="email" name="meta_required" type="hidden">
<input value="1" name="meta_forward_vars" type="hidden">
<input value="" name="meta_tooltip" type="hidden">
<script type="text/javascript">
{
document.write('<input type="hidden" name="custom sub1" value="'+sub1+'">')
document.write('<input type="hidden" name="custom sub2" value="'+sub2+'">')
document.write('<input type="hidden" name="custom sub3" value="'+sub3+'">')
}
</script>
<input type="image" value="Submit Button" name="submit" src="image.png" id="submit" class="button1">
</form>
</body>
For Aweber, it is important all the fields listed both hidden and not hidden to be passed on to the action="http://www.aweber.com/scripts/addlead.pl".
However, for myself, as I am only interested in 4 fields, I have specify all that I need in the jquery section in the head tag.
I don't know why the code isn't working... So, how do I make sure it will save to my server first with ajax before the form data is submitted to 3rd party url? Right now...
<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
is executing and working properly... but the ajax does not save the data at all from what i can tell
Thank you so much!
First change the event on the submit button you use. So instead of
$('#submit').submit(function () {
use
$('#submit').click(function () {
as the submit event is for the form, not the button. Once you've changed that, then as Ramengo mentioned, use your success function to submit the form.
Better would be though be to use the Aweber API which allows you to add users to an account since November 2011.
I'm just running out the door at the minute, but I just want to add that sometimes when you're having strange Ajax issues, try using GET instead of POST for the ajax call.. this has fixed many issues for me before and, since you're using ajax and the url isn't seen by the user, the differences are pretty subtle and irrelevant.
Let me know if that helps!
Are you doing anything with:
success: function() {
}
});
This will trigger on successful loading of the Ajax content and so, all you should need is:
success: function() {
$('#formid').submit();
}
});
Just make sure you have given your form an id you can easily use to refer to. If you don't set a behaviour for "success", then your form will never submit as you are stopping the submit behaviour with
return false;
Secondly, have you considered submitting the form to an intermediary script on your server that writes to file and then redirects to the destination 3rd party script?
That will save you having to figure out how to use Ajax if you are not familiar with it.