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>
Related
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
Take this simple form as an example:
<form method="post" action="reports.php">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Submit">
I want it to send the input fields data to the reports.php page but I want it to direct the user to the page uploads.php when he clicks the "Submit" button.
Using header("Location: uploads.php") on reports.php page is not an option because reports.php gathers the form data into a table for everyone to see. In the uploads.php page, the user will upload files that will also be visible on reports.php table.
How do I do this?
You can check if the method used in request to reports.php is POST, and redirect the user.
<?php
# reports.php
if($_SERVER['REQUEST_METHOD'] === 'POST') {
// process the data
header("Location: ...");
exit;
}
Or you can simply create a add_report.php file.
You could add "on form submit" event with javascript.
When the submit button is clicked - collect the form data with javascript and send it where is necessary. When the ajax worked - redirect the user to the desired page with javascript.
A complete example would be smth like:
for html
<form method="post" id="my_form">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Submit">
for javascript
<script>
$(function(){
$('#my_form').on('submit', function(e){
e.preventDefault();
var url = 'reports.php?' + $(this).serialize();
$.get(url, function(){
window.location.href = 'uploads.php';
});
})
})
</script>
more info can be found here:
https://api.jquery.com/serialize/
You need to refactor your code.
It sounds like your use cases are:
GET to uploads: Show uploads form
POST to somewhere: Add to reports and then show uploads form
GET to reports: Show reports list
POST to reports: Add to reports and then show uploads form
Don't worry about making the "somewhere" be the reports file.
Separate out the "Add to reports" code into a function (or functions) and put them into a file of their own.
Then include that file in both reports and uploads.
Make the upload form submit to uploads and then call the "Add to reports" function.
Do something similar in reports.
I have a form which opens in Colorbox and is submitted via Ajax/JQuery to itself. However, it seems as if the data passed is not including the value of the submit button itself. Whether I use multiple submits or just one, there is no data in $_POST['submitButton'], and it doesn't respond to isset() or empty().
The rest of the form posts just fine though. I can echo $_POST['name'] and $_POST['email'], just not $_POST['submitButton']
Here is (a stripped down version of) my form:
<form id="sub-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input name="name" type="text" value="">
<input name="email" type="text" value="">
<input name="submitButton" type="submit" value="Submit">
</form>
And here is the jquery that processes the form to be submitted via AJAX, rather than an HTTP request.
jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
cbox_submit();
}});
});
function cbox_submit()
{
jQuery("#sub-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
cbox_submit();
}});
}
);
return false;
});
}
I know this is an old question but It looks like people do not understand that #itachi has the correct answer.
The serialize method will NEVER return a value from the submit button. It does not return the submit button in the post.
You will do best to just use a hidden form field and adding a click event to the button.
Try using $_POST['submitButton']
jQuery's serialize() function is kind of quirky and particular. I find it to be not so useful for many scenarios. You may want to try the serializeObject plugin. I've found it to work in many cases when serialize() does not work for me.
i have two submit button on my index page namely International and Domestic. i want that two different button to point to different pages namely int.php and dom.php when i click on the buttons. can you help me out. thank
while it is allowed only to define single action = "" for form element. but if i have to do that, i would do it this way.
<form action ="somepage.php" method="post">
<!--all your input elements-->
<input type="submit" name ="international" value="international"/>
<input type="submit" name ="domestic" value="domestic"/>
</form>
determine which button have been clicked and act accordingly.
if(isset($_POST['domestic']) {
//include dom.php
}
else if(isset($_POST['international']) {
//include int.php
}
and then you can include the necessary file.
or the other way is to go with AJAX/jQuery way
you can just use switch in php for differ or
use javascript
Do it with jquery! First, dont create submit buttons just create
<input type="button" />
Than give them an id like:
<input type="button" id="InternationalBTN" />
<input type="button" id="DomesticBTN" />
and with jquery bind the action
$(document).ready(function(){
$("#InternationalBTN").bind('click',function(){
$('#idOfYourForm').attr('action','setTheDestinationPageHere');
document.forms['nameOfYourForm'].submit();
});
});
That will not be possible since your form's action attribute can only point to one location at a time and both buttons are in the same form(but possible if you use AJAX).
If you wanted to use pure PHP (i.e. no Javascript involved), you'd have to write two different handlers for the different button clicks, like below:
if(isset($_POST["name_of_international_button"])){
//actions to perform for this --
}
if(isset($_POST["name_of_domestic_button"])){
//action to perform for this
}
In the actions part of each of the handlers, you could then do a redirect, with the URL containing the data to be processed either in the int.php or dom.php scripts
You can do it in this way:
In form tag please leave empty action action=""
2 buttons to send:
<input class="btnSend" type="submit" name="International" value="International" id="International"/>
<input class="btnSend" type="submit" name="Domestic" value="Domestic" id="Domestic"/>
and use ajax:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('#International ').click(function() {
// send to file 1 using ajax
});
$('#Domestic').click(function() {
// send to file 2 using ajax
});
});
</script>
Here is how to send data using ajax:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Your form action would have to contain some sort of conditional statement to redirect users based on which submit button is clicked
<form action="<?php if(isset($_POST['international'])){echo 'international.php';}else{echo 'domestic.php';}?>" method="post">
<input type="text" name="field1" />
<input type="text" name="field2"/>
<input type="submit" value="international "name="international"/>
<input type="submit" value="domestic "name="domestic"/>
</form>
Or you could set up your conditionals on a page specified by the form actionand have them redirect based on which button was clicked,
Just put a form tag, and set the action to the page. Then the submit button will navigate to that page where the action tag is pointing to...
Easy as that :D
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.