0

When I print the data from mysql, everything is going into one cell in the first row instead of being spread out through the whole html table.

I've included below all of the code I've written, but the problem is in the get_input.js and get_input.php files at the bottom of this page.

How can I fix this?

vocab_input.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript" src="vocab_input.js"></script>
<script type="text/javascript" src="get_input.js"></script>

<style>
    th {
        text-align: center;
    }
    td {
        text-align: center;
    }
  form {
    margin-top: 50px;
  }
</style>

</head>
<body>
<!-- INPUT -->
<div class="container">
<h1></h1>
<form action="vocab_input.php" method="post" id="input_form">
  <label>Word:</label>  
    <input type="text" name='word'>
  <label>POS:</label>
    <input type="text" name='pos'>
  <label>Translation:</label>
    <input type="text" name='trans'>
  <label>Definition:</label>
    <input type="text" name='definition'>
  <label>Sentence:</label>
    <input type="text" name='sen'>
  <input type="submit">
</form>
</div>

<!-- BUTTONS -->
<div class="btn-group btn-group-justified" role="group" aria-label="..." style="margin-top: 50px;">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" id="list">Vocab List</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Matching</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Scrambled</button>
  </div>
</div>  

<!-- OUTPUT -->
<table class="table">
  <tr>
    <th>Word</th>
    <th>Part of Speech</th>
    <th>Translation</th>
    <th>Definition</th>
    <th>Sentence</th>
  </tr>
  <tr>
    <td id="mytable"></td>
  </tr>
</table>

</body>
</html>

vocab_input.js

$(function() {
    $('#input_form').on('submit', function(e) {
        var data = $("#input_form :input").serialize();
        $.ajax({
            type: "POST",
            url: "vocab_input.php",
            data: data,
        });
        e.preventDefault();
    });
});

vocab_input.php

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "vocab";

$word = $_POST['word'];
$pos = $_POST['pos'];
$trans = $_POST['trans'];
$definition = $_POST['definition'];
$sen = $_POST['sen'];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Insert data 
$sql = "INSERT INTO user_input (word, pos, trans, definition, sen)
VALUES ('$word', '$pos', '$trans', '$definition', '$sen')";
$conn->query($sql);

$conn->close();
?>

Here is where the problem is:

get_input.js

$(document).ready(function(){
    $("#list").click(function(){

      $.ajax({
        type: 'GET',
        url: 'get_input.php',
        success: function(data) {
          $("#mytable").text(data);
        }
      })
    })
})

get_input.php

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "vocab";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM user_input";
$result = $conn->query($sql);

while ($row = mysqli_fetch_assoc($result)) {
    foreach($row as $field) {
        echo htmlspecialchars($field);
    }
}

$conn->close();
?>
nasan
  • 73
  • 2
  • 15
  • 2
    Your code is vulnerable to [**SQL injection attacks**](https://en.wikipedia.org/wiki/SQL_injection). You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). – Alex Howansky Apr 14 '17 at 14:42
  • Thanks. Just learning now, so I'll look at that down the road. – nasan Apr 14 '17 at 14:53

1 Answers1

2

Change html to :

<table class="table">
  <tr>
    <th>Word</th>
    <th>Part of Speech</th>
    <th>Translation</th>
    <th>Definition</th>
    <th>Sentence</th>
  </tr>
  <tr id="mytable">
  </tr>
</table>

And PHP :

while ($row = mysqli_fetch_assoc($result)) {
       echo '<td>'.htmlspecialchars($row[0]).'</td>';
       echo '<td>'.htmlspecialchars($row[1]).'</td>';
       echo '<td>'.htmlspecialchars($row[2]).'</td>';
       echo '<td>'.htmlspecialchars($row[3]).'</td>';
}
My Name
  • 285
  • 1
  • 4
  • 18