Call PHP function with button onClick with parameter/ AJAX?

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.

2 parameters : what are the kind of your parameters ? Strings ? Objects ? Integers ? — Anwar
– Anwar, Commented Dec 19, 2016 at 13:42
Have you watched the AJAX request / response in the browser's developer tools? Are there any errors reported? Are you running this on a web-server? — Jay Blanchard
– Jay Blanchard, Commented Dec 19, 2016 at 13:45
When you use jQuery there is never any need for inline JavaScript. — Jay Blanchard
– Jay Blanchard, Commented Dec 19, 2016 at 13:46

Paul Basenko · Accepted Answer · 2016-12-19 13:56:48Z

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

Anwar · Accepted Answer · 2016-12-19 14:12:30Z

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

Collectives™ on Stack Overflow

Call PHP function with button onClick with parameter/ AJAX?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related