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>
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 situation where I have an accordian and I am referencing a php file gridlist.php within another php file displayvar.php. In other words the context of displayvar.php are shown in the webpage gridlist.php. Now gridlist.php has a checkbox input:
<input type="checkbox" id="foodlike" value="icecrm">I like ice cream</input>
<input type="checkbox" id="foodlike" value="pizza">I like pizza</input>
<input type="checkbox" id="foodlike" value="soda">I like soda</input>
Now when I check on the checkboxes in the table referenced by gridlist.php displayvar.php should be able to display a list of the items checked. For instance it should display if all three checkboxes are checked:
icecrmpizzasoda
If the last one is checked then only soda should be displayed. Keep in mind because this displayvar.php is displayed within the context of the website gridlist.php I used the following command in gridlist.php:
<?php include 'displayvar.php'; ?>
I tried in the displayvar.php to obtained the variables foodlike (as defined by the variable id in the checkbox gridlist.php) from gridlist.php and then echo them based on this snippet of code:
<?php
$like=$_POST['foodlike'];
echo "$like";
?>
How can I tweak this code to get my desired result?
You can achieve this with :
gridlist.php
<form method="post" action="displayvar.php">
<input type="checkbox" name="icecrm" value="icecrm">I like ice cream</input>
<input type="checkbox" name="pizza" value="pizza">I like pizza</input>
<input type="checkbox" name="soda" value="soda">I like soda</input>
<input type="submit" value="Submit">
</form>
displayvar.php
<?php
$icecrm = isset($_POST['icecrm']) ? $_POST['icecrm'] : null;
$pizza = isset($_POST['pizza']) ? $_POST['pizza'] : null;
$soda = isset($_POST['soda']) ? $_POST['soda'] : null;
echo is_null($soda) ? $icecrm.$pizza : $soda;
?>
As you mentioned you did not want a submit button, you'll probably want some sort of "interactive", instant solution and bypass going to the server, i.e. bypass PHP. Since the include 'foo.php'-statement effectively dumps all contents of foo.php into the current file (you could say it "merges them into one"), all interactions happen on the same page. Thinking about your setup as "file A is communicating with file B via the server" is wrong - there is only one file/page.
So, having said all this, my proposed solution uses Javascript and the seemingly omni-present jQuery library, which you will have to include in your page. The snippet below binds an event-handler to the inputs' change-event, which is triggered when a checkbox or radio are checked or the value of a text-input is changed. Then, we append the checked value to a dummy container for display.
$(function() {
var $likes = $('#likes');
// bind event handler to all input-elements
$('input').on('change', function() {
var $input = $(this),
oldText = $likes.text();
if ($input.is(':checked')) {
$likes.append($input.val());
} else {
$likes.text(oldText.replace($input.val(), ''));
}
});
});
label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="icecream">
<input type="checkbox" name="icecream" id="icecream" value="icecrm">I like ice cream</label>
<label for="pizza">
<input type="checkbox" name="pizza" id="pizza" value="pizza">I like pizza</label>
<label for="soda">
<input type="checkbox" name="soda" id="soda" value="soda">I like soda</label>
<span id="likes"></span>
Edit: This is how I would lay out the "root" file containing the two gridlist.php and displayvar.php, along with the Javascript required to manipulate the DOM:
<html>
<head>
<title>Test</title>
<style>
label {
display: block;
}
</style>
</head>
<body>
<!-- This will be in a file you called 'gridlist.php' -->
<label for="icecream">
<input type="checkbox" name="icecream" id="icecream" value="icecrm">I like ice cream</label>
<label for="pizza">
<input type="checkbox" name="pizza" id="pizza" value="pizza">I like pizza</label>
<label for="soda">
<input type="checkbox" name="soda" id="soda" value="soda">I like soda</label>
<!-- // -->
<!-- This will be in a file you called 'displayvar.php' -->
<span id="likes"></span>
<!-- // -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $likes = $('#likes');
// bind event handler to all input-elements
$('input').on('change', function() {
var $input = $(this),
oldText = $likes.text();
if ($input.is(':checked')) {
$likes.append($input.val());
} else {
$likes.text(oldText.replace($input.val(), ''));
}
});
});
</script>
</body>
</html>
Edit 2:
You still seem to be having problems, so I shall try to clarify why I think you are not succeeding.
Using only PHP, it is not possible to access the value of a checked checkbox without submitting the form back to the server.
To retrieve the value of a checkbox that has been checked by the user, you essentially have only two possibilities.
Option 1: Submit the form using POST/GET
This entails you having a <form> element enclosing the inputs along with a submit button for submitting the form. This is how (probably) 98% of forms on the Internet work. The data in the form is sent, using either the POST or GET method, to the script you specify in the form-tag. Consider this as an example (text omitted):
<form action="handler.php" method="get">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button type="submit"></button>
</form>
When the user clicks the submit-button, the form is sent to handler.php via the GET method. There, the form data will be available in the $_GET array. Same applies for POST. Now, an often-used approach is to submit the form to the same script via action="#", meaning you need not have a dedicated handler, but can process data within the same script as your form. Obviously, you will have to distinguish two cases: one initial case where no data is set in $_GET/$_POST, and one submission-case when the data is set.
The same applies to data stored in the $_SESSION, btw: again, you will have to tell a server-side script to put the data you want in the user-session; only then will you be able to retrieve it again.
A similar approach I would call "Option 1 b)" is submission via AJAX. This is basically form submission without leaving/reloading the page. Sending the data is done via Javascript and an "XMLHttpRequest". An XHR lets you send any type of data, not only XML. Again, similar logic applies: you serialize the data in some way, provide an endpoint, usually a script, to talk to, and communicate the data to that script via POST/GET. Then your script can handle the data and return a response, which will be available in the JS that initiated the AJAX-request.
Option 2: By accessing the DOM directly
The DOM is the "tree" that is made up of the HTML-elements of your page. Using Javascript, one can access and modify these elements, remove specific ones or add new ones. This API used to be implemented quite differently across browsers, which is why libraries like jQuery or Prototype were created: they provide a unified API across different user agents.
We can use two features of these libraries:
respond to (user-triggered) events
access elements and data stored therein
This is the approach I used in my answer, which I will not repeat here and you can read above. We respond to the event of the user clicking on a checkbox, and access that very checkbox to retrieve the value-data and process it further.
TL;DR
You have two options: submit the form to a script and process the data there; or, manipulate the DOM to catch user-events and pull out the values.
Credit: this is summing up every answer and comment in this thread, especially those of Obsidian Age and Valentin Papin, who both gave great answers that would lead to a clean and functional result.
I use PHP.
I have a form and after submit I want it to go to a URL with a $_POST variable at the end (as a $_GET), like this:
http://example.com/page.php?my_key=my_value
The problem is that "my_value" is created witin the form which means it does not know about it before the form is posted. Any ideas?
<form method="post" action="/page.php?my_key=">
<input type="text" value="my_value" name="my_key">
<input type="submit" name="submitter">
</form>
After sending form in PHP you can simple make 302 redirection to url you want.
In PHP file page.php (or in other file that is front controller) you can simple do:
if (isset($_POST['my_key'])) {
header('Location: http://'.$_SERVER["SERVER_NAME"].$_SERVER['REQUEST_URI'].$_POST['my_key'],true,302);
}
Use Javascript to change the action attribute.
I.E. Using jQuery:
jQuery('form').submit(function(eve) {
var action = eve.target.attr('action');
action = action + eve.target.find('input[name="my_key"]').val();
eve.target.attr('action',action);
});
A little rough, needs to be checked and maybe debugged.
You can Not pass an POST value through an url :
what you can do is something like this:
<form action="/page.php?my_key=" name="pre" method="POST">
<input type="hidden" name="my_key" value="my_value">
</form>
<script type="text/javascript">
setTimeout("document.forms['pre'].submit();",0);
</script>
now this will act as an link and will auto submit form as an POST.
I have built a site using php and want to try keep it one page.. The site displays pictures and so far i have it making links from folders in a folder each folder contains images so what i want is to make a post/get tag in the url and when the page loads it uses this to get the images from that folder.
So I want to use the generated links to post to the same page with a value via self_post is this possible and if so how?
my get section is
if(empty($_post['foldername']))
{
$directory = "portfolio/homepage/";
}
else if(isset($_post['foldername']))
{
$foldername = $_post['foldername'];
$directory = "portfolio/".$foldername."/";
}
and my link is like this
echo '<li><a id="" class="" href="'.$_SERVER["PHP_SELF"].'">'.$b.'<input type="hidden" name="foldername" value="'.$b.'" /></a></li>';
Thanks
What's wrong with GET?
Click me
The only way to make a POST request using a <a> tag would be to have it submit a form via javascript:
<form method="post" id="hidden_form" name="hidden_form" action="script.php">
<input type="hidden" name="foldername" value="<?php echo $b ?>" />
</form>
...
post me
You can also update the values of the hidden element(s) from javascript as well so when you click a particular link, it sets one of the values to something specific to the link.
The only way is doing it through JS. You can either send an AJAX request specifying POST, or you can create a hidden form and submit it. Here's an example
document.getElementById('my-link').onclick = function(){
// Code to submit the hidden form or to send an AJAX request specifying POST
return false; // to prevent the default behavior
}
I know of no way to do this with vanilla anchor tags. You could establish click event handlers in javascript to submit an XHR request. However, I have accomplished this in the past by using multiple form tags with a single submit entity (<input type='submit', <button type='submit', etc.).
Your forms would look like so:
<form action="{$_SERVER['PHP_SELF']}" method="post">
<input type="hidden" name="foldername" value="YOURVALUEHERE">
<input type="submit">
</form>
Like drew010 said if you absolutly need the POST method. Otherwise most single-page website uses things like index.php?a=1&b=2 where you can get "a" and "b" with $_GET["a"] ...
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.