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.
Related
I'd like to put a small form on my PHP page with a single input and a submit.
The single input will be for a text date (Apr 4, 2021).
Upon submit, I'd like to just display the timestamp for that input next to the form.
I'm hoping this can be accomplished without having to leave the page as usually I need the timestamp in another form I'm working with at the same time.
I've looked at jquery and ajax, but it's a bit outside my expertise. Can someone point me in the right direction?
What I'm hoping to do:
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
Consider the following jQuery Example.
$(function() {
$("#show_data").submit(function(e) {
e.preventDefault();
$.post("./calcPayDate.php", {
pay_date: $("input[name='pay_date']", this).val()
}, function(results) {
$("#result").html(results);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
jQuery is a Framework for JavaScript. You need JavaScript to be able to perform something in the "background". That something is referred to AJAX. The idea that your browser can send a bit of data to the server and the server can respond without loading an entire web page.
In HTML the default behavior of the Form will send the data, via GET or POST, to another page (usually a server side script).
With JavaScript, or in this case jQuery, we can collect the Value from the form and send just that to your Script. You will then need to handle the data that is returned by the script.
e.preventDefault is an Event command that prevent s the default event of the Form.
$.post() is a shorthand form of the AJAX POST method in jQuery.
$("input[name='pay_date']", this).val() gets the value from a specific input.
function(results) is a anonymous callback function that takes the data sent back and assigns it to results variable.
$("#result").html(results); puts the data into your container.
That's a super crash course for it.
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 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
As opposed to Dropbox Chooser V2, V1 used a hidden input field making it easy for PHP to get POSTed data from form.
Using V2, however, the input fiels is gone. How do I get the POST data to further process it?
Basically two main options:
You could make an AJAX call and include the URL in there.
You can include a hidden input tag in your form and put the URL in there.
Rough example of the latter (completely untested, sorry for typos/bugs):
<form method="POST" action="...">
<input id="url" name="url" type="hidden" />
<div id="container"></div>
</form>
<script>
var button = Dropbox.createChooseButton({
linkType: 'direct',
success: function (files) {
document.getElementById('url').value = files[0].link;
}
});
document.getElementById('container').appendChild(button);
</script>
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.