Develop Reference

Transform GET request to POST request to load generated PDF file

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.

Comments system : open a complex form (editor) next to Reply button

I have written a comment system in PHP. Currently, the editor is on the top of the page:
<form method="POST" id="comment_form" enctype="multipart/form-data">
<input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
<textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
<input type="hidden" name="comment_id" id="comment_id" value="" />
<input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>
Each comment look like that (simplified):
<div class="comment">
<b><?php echo $row["user"] ?></b>
<div>
<?php echo $row["comment"] ?>
</div>
<button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>
An small javascript function sets the focus on the editor when the Reply button is clicked:
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
I would like that editor to open below any Reply button when one of the buttons is clicked.
I guess that adding the editor code after each comment with a "display: none" attribute is not the best solution.
Would you please help me to achieve that ?

If I understand correctly you want one form for all comments, rather than duplicating the form HTML inside every comment.
In which case you need to move it in the DOM via JavaScript. You don't show any attempt at this but it might look something like this:
$(document).on('click', '.reply', function() {
$('#comment_form').insertAfter(this); //<-- move form
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
Note also that your JS is syntactically invalid as you have double });.

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.

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..

Bootstrap form not calling JS function on submit

I have the following code which consists of a form whose on submit calls a javascript function.
<div class="form" role="form" onsubmit="createresult()">
<fieldset>
<?php
$subject = $_GET["sub"];
$array = mysqli_query($con, "Select * from questions where subject='$subject'");
$j =1;
while($row = mysqli_fetch_array($array))
{
echo "
<div class=\"form-group\"><h5>$row[question]</h5>";
for($i=1;$i<5;$i++)
{
$opt1 = "option".$i;
$opt = $row[$opt1];
$name = "question" ."$j";
echo "
<label class=\"radio-inline\">
<input type=\"radio\" name=$name required>$opt</label>";
}
echo "</div>";
$j++;
}
?>
<button type="submit" class="btn btn-primary" name="submit">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</fieldset>
</div>
The PHP script is working fine but this form is not calling the JavaScript function createresult().

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onsubmit
The submit event happens when a user clicks a submit button inside a <form> tag. Right now you use a <div> tag.
If you would like to use the <div> tag, instead of using onsubmit, use onclick on the submit
<button type="submit" class="btn btn-primary" name="submit" onclick="createresult()">Submit</button>

Change:
<div class="form" role="form" onsubmit="createresult()">
// your code
</div>
To
<form onsubmit="createresult()">
// your code
</form>