Call PHP function with button onClick with parameter/ AJAX? - php

Question

Hello I want to call my function download when the user click on the button, basically:
<input type='button' name='Release' onclick="document.write('<?php downloadFichier($tab1, $t2) ?>');" value='Click to Release'>
Of course doesn't work, so I try to do with a AJAX, I don't know this language, but it is possible to do what I want: call my PHP function with 2 parameters?
<button type="button">Click Me</button>
<p></p>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'POST',
url: 'file_product.php',
success: function(data) {
$("p").text(data);
}
});
});
});
</script>
Thank you for helping me.

Answer 1

You should call a js-function with onclick event like this:
<input type='button' name='Release' onclick="downloadFichier(param1, param2)" value='Click to Release'>
And your AJAX-function should be like this:
function downloadFichier(param1, param2){
$.ajax({
type: 'POST',
url: 'file_product.php',
data: "param1=" + param1 + "&param2=" + param2,
success: function(data) {
$("p").text(data);
}
});
You can get your params in PHP-script from the $_REQUEST array by their names (param1, param2).

Answer 2

#PaulBasenko inspired this alternative, where you set the parameters through some <input type="hidden" /> :
HTML
<form action="#" method="POST" id="form1">
<input type="hidden" name="tab1" value="<?= $tab1 ?>" />
<input type="hidden" name="t2" value="<?= $t2 ?>" />
<button type="submit">Click to Release</button>
</form>
Javascript
$(function() { // equivalent of "$(document).ready(function(){"
$('body').on('submit', '#form1', function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'file_product.php',
data : formData,
success : function(data) {
$('#p').text(data);
}
});
});
});
PhP
<?php
$tab1 = (isset($_POST['tab1'])) ? $_POST['tab1'] : null;
$t2 = (isset($_POST['t2'])) ? $_POST['t2'] : null;
// process & return json_encoded data
?>
How it works ?
When clicking on the button, which is a type="submit", it will trigger the submit event for its parent form. Then, jQuery listen to this event and immediately blocks it using èvent.preventDefault() in order to call Ajax instead of a regular synchronous call to a php file.