On click get from mysql load into table

0 votes
asked Apr 12, 2017 by nasan

I was able to input the data from 5 forms into mysql when the user clicks the submit button.

Now, I want to display the data in a table when the user clicks a different button. I know I need to use Ajax and Php, but I haven't been able to find an example that was clear to me.

Part of my code is below. I didn't include the javascript and php I used to post the form data to the database. If that would help you understand, I can add it.

input.html

<div class="container">
<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>
<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>
<-- I want the table displayed here when user clicks the list button -->

get_input.js

$(function() { $('#list').on('click', function(e) { var data = $("#list :input").serialize(); $.ajax({ type: "GET", url: "get_input.php", data: data, }); e.preventDefault(); });
});

get_input.php

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM user_input";
$result = $conn->query($sql);
while ($row = mysql_fetch_array($result)) { echo '<tr>'; foreach($row as $field) { echo '<td>' . htmlspecialchars($field) . '</td>'; } echo '</tr>';
}
$conn->close();
?>

1 Answer

0 votes
answered Nov 8 by rick-calder

HTML where table is required create a basic table element to insert your data into.

<table id="mydata"></table>

PHP rather than echoing out each line create a return array, then print that array json encoded.

$return = array()
while ($row = mysql_fetch_array($result)) { foreach($row as $field) { $return[] = '<td>' . htmlspecialchars($field) . '</td>'; }
}
print(json_encode($return));

JS in the success function of the js call iterate through the returned json and create a new html variable. Then set the html of the table you created in the HTML portion above with that new variable.

$(function() { $('#list').on('click', function(e) { var data = $("#list :input").serialize(); $.ajax({ type: "GET", url: "get_input.php", data: data, dataType: "json", success: function(data) { var html; if(data) { for(var i=0; i < data.length; i++) { html += "<tr>data[i]</tr>"; } $("#mytable").html(html); } } }); e.preventDefault(); });
});

This is all off the top of my head and untested, but assuming all your other functions return the correct data it should work.

There is no error handling at all, basically to do that what I normally do is instead of returning just $return, I'll put all the data in a $return["data"] array, then if the PHP function errors return a $return["error"], and then in the js instead of if(data) you can do if(data.error !="") or something similar.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...