在PHP post方法中使用jquery

Question

I am not very experienced in jquery and ajax but I need the following. After users have successfully logged in they can download pdf files from the page. The site has a collapse div from where they can choose which file to download. Everything is done in php and works ok. However, if the file is not found the collapse div is closed back. In other words the web page gets reloaded. So the user has to make a new selection newly which is inconvenient. So I would the following. If the file is not found then the div should stay collapsed and the previous value in the input field 's' on the form. I know this should be done via jquery or javascript. I have tried the following but it does not work.

         //PHP

  <?php
    //if download is clicked
     if (isset($_POST["download"])) {
    $data = $_POST["s"];

     //if file is found
     if (fileexists($data){
    // We'll be outputting a PDF 
    header('Content-type: application/pdf'); 

    // It will be called downloaded.pdf 
    header('Content-Disposition: attachment; filename="downloaded.pdf"'); 

    // The PDF source is in original.pdf 
    readfile($data); 
    }
    //else the div should remain open
    else{  
         echo "<script> if ($('#collapseOne').is(':hidden')) {
               $('#collapseOne').show();
              }</script>";
     }
   } 
     ?>              

         <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <form id='searchForm' method="post" action=''>
                <p><label>Select Month</label></p>
                <input id='s' name = 's' type='text' required><br><br>
                <button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
                    <span class='glyphicon glyphicon-download-alt'></span> Download
                </button>
                <br> <br>
                <button id='download1' name = 'download1' class='btn btn-default btn-lg'>
                    <span class='glyphicon glyphicon-download-alt'></span> Download All
                </button>
               </form>              
              </div>
        </div>

Answer 1

Try using this!

$.ajax({
    url:"/path/to/your/script/",
    type: "post",
    data: //fetch the data which you want to pass
}).done(function(status){
    //status is the data returned from the script called
});

Answer 2

In short, you echo PHP into Javascript

<script> 
    $(document).ready(function(){
        var hasDownload = "<?php echo $_POST['download']; ?>";
        var oldInput = "<?php echo $_POST['s']; ?>";
        if(hasDownload == false) {
           $('#collapseOne').show();
           $('input#s').val(oldInput);
        }
    })        
</script>

When the server serves your file, those values will be present for your Javascript. Place you're jQuery at the bottom in another if statement & a doc ready block so that the dom is loaded first and echo your PHP variables into Javascript variables to perform your jQuery logic.

<?php

    if (isset($_POST["download"]) && fileexists($_POST["s"]) {
        header('Content-type: application/pdf'); 
        header('Content-Disposition: attachment; filename="downloaded.pdf"'); 
        readfile($_POST["s"]); 

    } 

?>              

<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
        <form id='searchForm' method="post" action=''>
            <p><label>Select Month</label></p>
            <input id='s' name = 's' type='text' required><br><br>
            <button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
                <span class='glyphicon glyphicon-download-alt'></span> Download
            </button>
            <br> <br>
            <button id='download1' name = 'download1' class='btn btn-default btn-lg'>
                <span class='glyphicon glyphicon-download-alt'></span> Download All
            </button>
       </form>              
    </div>
</div>

<?php if(isset($_POST["download"]) == false && fileexists($_POST["s"] == false) : ?>  
    <script> 
        $(document).ready(function(){
            var hasDownload = "<?php echo $_POST['download']; ?>";
            var oldInput = "<?php echo $_POST['s']; ?>";
            if(hasDownload == false) {
               $('#collapseOne').show();
               $('input#s').val(oldInput);
            }
        })        
    </script>
<?php endif; ?>