Replicate the same data request query, but using a JavaScript Ajax post

Question

Replicate the same data request query, but use a JavaScript Ajax post so that it doesn’t refresh the page on button press, just requests another page and display in a section on the page. i need some help changing this to a ajax post

my code

*<?php
if(isset($_POST['submit']))
{
$success = $_POST['success'];
$dates = $_POST['dates'];
$datee = $_POST['datee'];
/*** mysql hostname ***/
$hostname = 'localhost';
$dbname = '*******';
/*** mysql username ***/
$username = 'root';
/*** mysql password ***/
$password = '*******';
try {
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
    $tablename = 'login_attempts';
    $sql = 'SHOW COLUMNS FROM `'.$tablename.'`';
    $fields = array();
    $csv = array();

    $stmt = $dbh->query($sql);      
    while($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        array_push($fields, $row['Field']);
    }

    array_push($csv, $fields);
    $success = mysql_real_escape_string($success);  
    $sql = "SELECT * FROM $tablename WHERE success = '".$success."' AND attempted >='".$dates."' AND attempted <='".$datee."'";
    $stmt = $dbh->query($sql);
    $stmt->execute();

    $csv = array();

    while($row = $stmt->fetch(PDO::FETCH_NUM))
    {
        array_push($csv, $row);
    }

    $fp = fopen('file.csv', 'w');

    foreach ($csv as $row) {
        fputcsv($fp, $row);
    }

    fclose($fp);
    header("Content-type: application/csv");
    header("Content-Disposition: attachment; filename=export.csv");
    header("Pragma: no-cache");
    header("Expires: 0");
    readfile('file.csv');
    $dbh = null;
} catch(PDOException $e) {
    echo $e->getMessage();
}
     exit();}
?>
<html>
    <head>
        <title>csv with criteria</title>
    </head>
    <body>

        <form action="csv2.php" method="post"  enctype="multipart/form-data">
        Select data range
        <br>
        <input type="date" name="dates" id="dates"> Starting date
        <br>
        <input type="date" name="datee" id="datee"> Ending date
        <br>
        Select what data you'd like
        <br>
        <input type="radio" name="success" value="1" checked> Yes<br>
        <input type="radio" name="success" value="0"> No<br>
        <input type="submit" value="show" name="submit">
        <br>
    </form>
    </body>
</html>*

and i could use a walk through on how it works – Demoneus Mar 27 '16 at 10:44 — Demoneus, Mar 27 '16 at 10:44

score 0 · Answer 1 · edited May 23 '17 at 11:50

You can see this post where it's explained how to make a good ajax call to POST parameters. But you will need to separate this portion of code :

    <?php
if(isset($_POST['submit']))
{
$success = $_POST['success'];
$dates = $_POST['dates'];
$datee = $_POST['datee'];
/*** mysql hostname ***/
$hostname = 'localhost';
$dbname = '*******';
/*** mysql username ***/
$username = 'root';
/*** mysql password ***/
$password = '*******';
try {
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
    $tablename = 'login_attempts';
    $sql = 'SHOW COLUMNS FROM `'.$tablename.'`';
    $fields = array();
    $csv = array();

    $stmt = $dbh->query($sql);      
    while($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        array_push($fields, $row['Field']);
    }

    array_push($csv, $fields);
    $success = mysql_real_escape_string($success);  
    $sql = "SELECT * FROM $tablename WHERE success = '".$success."' AND attempted >='".$dates."' AND attempted <='".$datee."'";
    $stmt = $dbh->query($sql);
    $stmt->execute();

    $csv = array();

    while($row = $stmt->fetch(PDO::FETCH_NUM))
    {
        array_push($csv, $row);
    }

    $fp = fopen('file.csv', 'w');

    foreach ($csv as $row) {
        fputcsv($fp, $row);
    }

    fclose($fp);
    header("Content-type: application/csv");
    header("Content-Disposition: attachment; filename=export.csv");
    header("Pragma: no-cache");
    header("Expires: 0");
    readfile('file.csv');
    $dbh = null;
} catch(PDOException $e) {
    echo $e->getMessage();
}
     exit();}
?>

into one another php file.

score 0 · Accepted Answer · answered Mar 27 '16 at 10:53

If you want to use AJAX request on form submit you should:

Import the jQuery library: e.g. <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Create a new JavaScrpit file where you will catch the form submit event, send jQuery request and analize the response, e.g.:

$(document).ready(function(){
$("#myForm").submit(function(e){
   e.preventDefault(); //stop sending the form

   //here you should validate your form

   //submit it via AJAX:
   $.ajax({
       url: "csv2.php",
       data: { dates: $("#dates").val(), datee: $("#datee").val(), $('input[name='success']:checked', '#myForm').val() }
   })
})
});

You can use another functions of AJAX object such as success or error callback functions: jQuery.ajax(). Don't forget to add ID to your form.

Replicate the same data request query, but using a JavaScript Ajax post

2 Answers2