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

Question

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!

Try turning error reporting on for your PHP code; that might help reveal some hidden problems — nomistic
– nomistic, Commented Apr 26, 2015 at 21:25
You are not using your $sql variable with your mysql_query method. All you are doing is setting your insert query into a variable, and then never use it. Also since you are not escaping your values or putting them in quotes in the query, it will probably fail on a syntax error — Patrick Evans
– Patrick Evans, Commented Apr 26, 2015 at 21:28
did you check what is your mysql password? it is actually root or anything else? — Khairul Islam
– Khairul Islam, Commented Apr 26, 2015 at 21:29

Khairul Islam · Accepted Answer · 2015-04-26 21:35:48Z

2

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

mysql_query($sql);

answered Apr 26, 2015 at 21:35

Khairul Islam

1,2151 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed-Yousef · Accepted Answer · 2015-04-26 21:47:40Z

1

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

edited Apr 26, 2015 at 21:47

answered Apr 26, 2015 at 21:31

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

2 Comments

Brady Sheridan Over a year ago

Thanks a ton, I finally got it working! Could you explain that second last code block? What is the purpose of return false;?

Mohamed-Yousef Over a year ago

@BradySheridan glad to hear that .. you can read this css-tricks.com/return-false-and-prevent-default .. you will find good explanation if you want .. but for me and seriously I used to use that code with a form submit as it is specially while it works perfect with no errors in localhost or even online host

Kresimir Pendic · Accepted Answer · 2015-04-26 21:29:19Z

0

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

answered Apr 26, 2015 at 21:29

Kresimir Pendic

3,6471 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related