Transform GET request to POST request to load generated PDF file - javascript

In an html page I have a button that loads a generated pdf:
<button onclick='getpdf()'>GET PDF</button>
<script>
function getpdf(){
data={
var1: 'var1',
var2: 'var2'
};
window.open('genpdf.php?var1='+data['var1']+'&var2='+data['var2'], '_new');
}
</script>
genpdf.php is something like this:
<?php
require('fpdf/fpdf.php');
$var1 = $_GET['var1'];
$var2 = $_GET['var2'];
$pdf = new PDF();
/* ......... */
$pdf->Output('D','generated.pdf');
?>
My question is:
How can I change my code to pass parameters with POST method?
SOLUTION
ADyson suggested me this solution:
<form id="pdf" action="genpdf.php" methon="POST" target="_new">
<input type="hidden" name="var1" />
<input type="hidden" name="var2" />
<button onclick='getpdf()'>GET PDF</button>
</form>
<script>
function getpdf(){
$("#pdf input[name=var1]").val('var1');
$("#pdf input[name=var2]").val('var2');
$("#pdf").submit();
}
</script>
and
<?php
require('fpdf/fpdf.php');
$var1 = $_POST['var1'];
$var2 = $_POST['var2'];
$pdf = new PDF();
/* ......... */
$pdf->Output('D','generated.pdf');
?>
and it works fine!
BUT
If I wanted to do that without the use of a form, how could I do?


If you want to implement without coding HTML then use following Javascript
var myform = document.createElement('form');
myform.style.display = "none";
myform.name='PdfGenOrSomethingElse';
myform.method='POST';
myform.action='genpdf.php';
myform.target='_blank';
var var1=document.createElement('input');
var1.type='text';
var1.name='var1';
var1.value='Put/update your value';
var var2=document.createElement('input');
var2.type='text';
var2.name='var2';
var2.value='Put/update your value';
myform.appendChild(var1);
myform.appendChild(var2);
document.body.appendChild(myform);
myform.submit();
Notice the form will not be displayed on the page. "display" property is set to "none".


You don't need any javascript function for this. Just use FORM element with action post:
<form action="genpdf.php" method="post" target="_blank">
<input type="text" name="var1" value="" />
<input type="text" name="var2" value="" />
<button type="submit ">GET PDF</button>
</form>
The don't forget to use $_POST instead of $_GET in your PHP script.

Related

How to simply post javascript data to PHP with HTML form

I have this in my javascript code:
var data = signaturePad.toDataURL('image/png');
document.write(data);
the output looks slimier to that:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAHFklEQVR4Xu3VsQ0AAAjDMPr/0/yQ2exdLKTsHAECBAgQCAILGxMCBAgQIHAC4gkIECBAIAkISGIzIkCAAAEB8QMECB...
Instead of document.write(data); I want to post the data to the self page by using a simple HTML form with hidden filed that can hold the data from JS. then, I want to use PHP to handle $_POST and store the data in a variable...
<?php
// check for form submission...
if(isset($_POST['send'])) {
// get the data
$data = $_POST['data'];
}
?>
HTML form:
<form method="post">
<input type="hidden" name="data" value="">
<input type="submit" name="send" value="submit">
</form>
I understand that I can somehow do it with AJAX but I couldn't figure out with the form, how should I get this done?
I guess that I'm looking for 2 solutions - first, how to use the form with JS to store the data in the hidden field and afterwords, maybe how to post it via AJAX to PHP if it can't be just posted to the same page...

There is a lot of ways to achieve this. In regards to the way you are asking, with a hidden form element.
change your form to:
<form method="post" name="myform" method="post" action="script.php">
<input type="hidden" name="data" value="">
<input type="submit" name="send" value="submit">
</form>
Javascript:
var data = signaturePad.toDataURL('image/png');
document.myform.data.value = data;
document.forms["myform"].submit();
Or Jquery:
var data = signaturePad.toDataURL('image/png');
$('form input[name="data"]').val(data);
$("form").submit();

use like this
<?php
$data="<script>signaturePad.toDataURL('image/png')</script>";
?>
<form method="post">
<input type="hidden" name="data" value="<?php echo $data; ?>">
<input type="submit" name="send" value="submit">
</form>
works all the time.

Get PHP variable to javascript

I cant seem to find the answer for this one. I need to grab a PHP variable and insert it into javascript.
Here is an example of what I have in the body of a PHP page:
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php Print($info); ?>";
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<?php
$info="some info";
?>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
So the problem is that the alert pops up but doesn't echo the $info string. Obviously i'm missing the right way to grab a PHP variable. Please help.

If the php variable is visible inside the inner HTML, you could do something like this to grab the variable:
HTML:
<span class="variable-content"><?php echo $variable; ?></span>
jQuery:
var php_variable = $(".variable-content").text();
alert(php_variable);

Change:
alert(info);
to:
alert('<?php echo "some info"; ?>');

It looks to me like you are declaring the variable after you use it. So there is nothing in $info.
try:
<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php echo $info; ?>";
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

try this
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<span id="info" hidden><?php
$info="some info";
echo $info;
?></span>
<form id="frm1" method="post">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = $("#info").text();
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
</body>
</html>

Primary issue with your example code
All of the PHP executes ahead of the JS. PHP executes, then outputs Your HTML and JS to the browser where they are rendered/executed/etc.
As such, your Print of $info is executing before your declaration and definition of $info. You need to define it, then output it.
Further issues you should consider
Once this is solved, you'll eventually run into issues with simply spewing data into the middle of JS. It is not easily maintained, and unprepared data will eventually break your JS syntax. When I have to do such a thing, I generally separate the two as much as possible:
<?php
// declare and define the data
$info = "foo";
?>
<script>
// prepare an IIFE which takes the data as a param
(function (info) {
// inside this function body you can use the data as you
// please without muddling your JS by mixing in PHP
alert(info);
}(
// in the invoking parens, output encoded data
<?= json_encode($info) ?>
));
<script>
Another benefit of this approach is that you can pass any PHP data structure to JS without changing the approach in any way. (As opposed to using inputs or element texts where you'd need to parse the JSON and keep track of which elements contain which values)

If you don't want to use JQuery you could put the php value into a hidden input and get it from the hidden variable with JavaScript documentGetElementById... that way you can keep your script in the head, which seems to meet your requirements. Either the hidden span as per #Miko or:
<input type="hidden" id="php_info_data" name="php_info_data" value="<?php echo $info; ?>" />
and in your header script which executes after the body has loaded:
var info = documentGetElementById('php_info_data').value;

<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php echo($info); ?>";
alert(info);
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

Try this
var info = "<?php echo $info; ?>";

try this
<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(<?php echo $info;?>);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

you can convert PHP variable to JSON and then send it Javascript, becoz JSON
is supported by all language
Example
var a=<?php echo json_encode($info); ?>
alert(a);
or simply
var a=<?php echo $info; ?>
alert(a);
<?php $info=10; ?>
<script>
var a=<?php echo $info; ?>;
var a1=<?php echo json_encode($info+10); ?>;
alert(a);
alert(a1);
</script>

How to pass text from form to javascript function

So I have little problem, I want to write something in form and pass it to symfony2 controller, but I have no idea how can I do it. I tried something like this:
Index.html:
<form action='#close' ng-submit='calCtrl.test(day.id, $index)'>
<div class='form-field'>
<span class='sp'>Podaj opis (opcjonalnie):</span><br />
<textarea></textarea>
</div>
<div class='form-field'>
<input type='submit' value='Zmień'>
</div>
</form>
Controllers.js:
this.test = function($id, $index) {
$http.put('http://localhost:8000/api/v1/notes/' + $id + '.json');
};
Symfony controller:
public function putNoteAction(Request $request, $id) {
}
Now I can pass only $id and nothing more.

To get value from form to javascript function, you can do as follows:
<form onsubmit="myFunc()">
<input type="text" id="t1">
<input type="submit">
</form>
<script>
function myFunc()
{
alert(document.getElementById("t1").value);
}
</script>
Furthermore, if the form is submitting value to server side, then still at server end you can assign the values to javascript variables. like:
<form action="action.php" method="GET">
<input type="text" id="t1" name="t1">
<input type="submit">
</form>
action.php code will be as follows:-
// To assign form posted value to javascript variable.
var javascript_variable = <?php echo $_GET['t1']; ?>;
You can use same approach with symfony using symfony syntax..

passing textarea data from view to controller codeigniter

I have a form in my home_view.php that uses textarea that goes like this:
<form action="<?php echo base_url();?>add" method="post">
<textarea name="add-list" id="add-list" rows="10" cols="75"> </textarea>
<input type="submit" id="add-btn" class="btn btn-primary" value="Add" />
</form>
In my controller, I have this:
public function add(){
$value = $this->input->post('add-list');
echo "<script type='text/javascript'>alert('$value'); window.location.href='".base_url()."'</script>";
//more code here
}
The problem is the alert only pops up when I have a one-liner input. How can I get all the inputs of the user including new line ('\n')?

You can use nl2br function :
$value = nl2br($this->input->post('add-list'));

Upload file with IFRAME, the file don't get to the server

Following my code:
HTML:
<form id="test" action="javascript:test()" method="post">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.src="test.php";
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
PHP:
<?php
if (isset($_FILES["image"])){
echo 'exist';
exit();
}
?>
Where is the error? I'm sure the problem is in javascript, it would be easy to take off without the javascript dynamically create the iframe, but I must use javascript.

there are a couple of problems with that but nothing major,
firstly in order to post files you need to add enctype="multipart/form-data"to your form
seccondly the action of the form should be the file you are posting to (the iframe source) and the javascript should be run from onsubmit
finally you need to give the iframe an id for cross browser support
i end up with this
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.id = "iframe_upload"; //some browsers target by id not name
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
HTML:
<form id="test" method="post" target="iframe_upload" enctype="multipart/form-data" onsubmit="javascript:test()" action="test.php">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
print_r($_FILES);
?>

Categories

Resources