CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Brady Sheridan
Brady Sheridan

Reputation: 13

Storing and retrieving data with jQuery, PHP, AJAX, and MySQL

I'm new to programming. I've become pretty good with HTML, CSS, and jQuery, but I may have accidentally gotten in too deep with this project. Before I go back and learn about server-side programming the proper way, I'm determined to get this page to work.

I have an HTML page set up that takes four inputs (firstName, lastName, grade, and PR) and I want these inputs to be saved into the table below (I'm using bootstrap, not sure if that affects anything). Here is the HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 style="text-align:center">1600M Run - PR Sheet</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <form style="text-align: center;">
                First name: <input type="text" id="firstName"></input>
                Last name: <input type="text" id="lastName"></input>
                Grade: <input type="text" id="grade"></input>
                1600M PR: <input type="text" id="PR"></input>
                <input type="submit" value="Enter" id="enterInfo"></input>
            </form>
        </div>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <td><strong>First Name</strong></td>
            <td><strong>Last Name</strong></td>
            <td><strong>Grade</strong></td>
            <td><strong>PR</strong></td>
        </tr>
    </thead>
    <tbody id="runnerInfo">
        <tr>
            <td>Brady</td>
            <td>Sheridan</td>
            <td>12</td>
            <td>4:42</td>
        </tr>
    </tbody>
</table>

I'm using jQuery+AJAX and PHP to send the input to a MySQL database called "runnerdata", then log the input to the table. Here is the javascript:

$(function(){
$('#enterInfo').click(function (){

    var firstName = $('#firstName').val();
    var lastName = $('#lastName').val();
    var grade = $('#grade').val();
    var PR = $('#PR').val();

    $.ajax({
        url: 'prentry.php',
        type: 'post',
        datatype: 'json',
        data: {'firstName': firstName, 'lastName': lastName, 'grade': grade, 'PR': PR},
        success: function(data){
            var firstName = data[0];
            var lastName = data[1];
            var grade = data[2];
            var PR = data[3];

            $('#runnerInfo').append("<tr><td>"+firstName+"</td><td>"+lastName+"</td><td>"+grade+"</td><td>"+PR+"</td></tr>");  
        };
    });

});
});

And here is the PHP:

<?php

    //Connect to database
    $host = "localhost";
    $user = "root";
    $pass = "root";
    $databaseName = "prentry";
    $tableName = "runnerdata";

    $con = mysql_connect($host,$user,$pass);
    $dbs = mysql_select_db($databaseName, $con);

    //Retrieve input from jQuery
    var $fname = $_POST['firstName']
    var $lname = $_POST['lastName']
    var $grade = $_POST['grade']
    var $PR = $_POST['PR']

    //Store input in database
    $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
    VALUES ($fname, $lname, $grade, $PR)";

    //Return data
    $result = mysql_query("SELECT * FROM $tableName");
    $array = mysql_fetch_row($result);

    echo json_encode($array);

?>

When I test the page, nothing happens. When I check my database, it hasn't been updated either. I have no doubt that I'm doing something horribly wrong, the server-side part of this project is just a conglomeration of like 6 different tutorials. The one thing I am sure of is that I have all the correct libraries linked in my <head></head> tags.

Any help is appreciated, I'd really like to move on from this project!

Upvotes: 1

Views: 4441

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

What is this

//Retrieve input from jQuery
    var $fname = $_POST['firstName']
    var $lname = $_POST['lastName']
    var $grade = $_POST['grade']
    var $PR = $_POST['PR']

it should be

//Retrieve input from jQuery
    $fname = $_POST['firstName'];
    $lname = $_POST['lastName'];
    $grade = $_POST['grade'];
    $PR = $_POST['PR'];

and

//Store input in database
    $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
    VALUES ($fname, $lname, $grade, $PR)";

should be with quotation for string and not for integer

//Store input in database
        $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
        VALUES ('$fname', '$lname', $grade, $PR)";

and when you trying to submit a form using ajax .. give your form a CLASS or ID and in js 

$('#my_form').on('submit',function(){
  // your code here
});

and if you want to check your variables in js before you send to php

$('#my_form').on('submit',function(e){
      e.preventDeafault();
      // your code here
      return false;
    });

and in you ajax success use

window.location.href = 'url';

to redirect a user after ajax completed

Upvotes: 1

Khairul Islam
Khairul Islam

Reputation: 1215

You should run your query for storing your data.use-

mysql_query($sql);

Upvotes: 2

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

I'm not seeing anything that is not ok here, but I would suspect on wrong reference on some html part or maybe url?

  • try to alter path to php file to be absolute,
  • try to change text 'post' to 'POST'
  • try to open developer or google chrome console, to lookup for javascript red errors,, after that you post them here

Upvotes: 0

Related Questions