php - Everything in mysql is printing to only one cell in html table -
when print data mysql, going 1 cell in first row instead of being spread out through whole html table.
i've included below of code i've written, problem in get_input.js , get_input.php files @ bottom of page.
how can 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 user_input (word, pos, trans, definition, sen) values ('$word', '$pos', '$trans', '$definition', '$sen')"; $conn->query($sql); $conn->close(); ?> here 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 * user_input"; $result = $conn->query($sql); while ($row = mysqli_fetch_assoc($result)) { foreach($row $field) { echo htmlspecialchars($field); } } $conn->close(); ?>
change html :
<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>'; }
Comments
Post a Comment