Displaying Results of inputbox in a table using php ajax jquery

I am trying to submit information to a mysql database. When the page loads it should show all the data currently in the mysql table and when the user enters the information it should update the table without refreshing the page. Here is what i have so far.

for my homepage

<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" typer="text/javascript"></script>
<div class="wrapper">

 <h3>Conversation Portal</h3>

 <div class="entry_wrapper">
<h4> Enter Conversation Here</h4>

<ul>
<li>
<label>English:</label>
<input class="inputbox" type="text" size="50" id="english"/>
</li>

<li>
<label>Sanskrit:</label>
<input class="inputbox" type="text" size="50" id="sanskrit"/>
</li>

<li>
<label>Date:</label>
<input class="inputbox" type="text" size="50" id="datepicker"/>
</li>
</ul>

</div>

<div class="response_wrapper">
<textarea id="responseText"></textarea>
</div>
<input type="button" value="submit" id="call_bck_btn"/>

</div>


</body>

For my javascript i have:

$(document).ready(function(){


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



    $.post("ajax.php" , 
    {
        english  :$('#english').val(),
        sanskrit :$('#sanskrit').val()


        },
        function(data)
        {
            $('#responseText').val(data);

            }
            );

});


});

And for my php:

<?php
$method=$_SERVER['REQUEST_METHOD'];
if(strtolower($method)=='post')
{
$english = addslashes($_POST['english']);
$sanskrit = addslashes($_POST['sanskrit']);

$connect=mysql_connect('localhost','root','');
$db=mysql_select_db('test2');
$sql="insert into conversation(English,Sanskrit) values('$english','$sanskrit')";

$result=mysql_query("select*from conversation");
echo "<table border='1'>
<tr>
<th>English</th>
<th>Sanskrit</th>
</tr>";

while($row=mysql_fetch_array($result)){
     echo "<tr>";
  echo "<td>" . $row['English'] . "</td>";
  echo "<td>" . $row['Sanskrit'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

    }


?>

Thanks for any ideas on what to do.

Answers


Well, your pretty much there with what you want. If you ran this, I think it would work (roughly). Although there are quite a few (major!) flaws in your code. Just to sum them up first:

  1. Don't use root access to your database, EVER!! This is a MAJOR security hazard.
  2. Don't use the mysql extension, it has officially been deprecated for several PHP versions now; instead use either PDO or MySQLi (both are far better)
  3. Use prepared queries (available in PDO and MySQLi) to make your queries safer.
  4. Fix your HTML; Don't display your resulting HTML table inside a tag. This is incorrect HTML. Rather, use a div for such a thing. Likewise,

In short, I would rewrite it to:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>

<h4> Enter Conversation Here</h4>
<form id="conversationForm">
<ul>
<li>
<label>English:</label>
<input class="inputbox" type="text" size="50" id="english"/>
</li>

<li>
<label>Sanskrit:</label>
<input class="inputbox" type="text" size="50" id="sanskrit"/>
</li>

<li>
<label>Date:</label>
<input class="inputbox" type="text" size="50" id="datepicker"/>
</li>
</ul>
</div>

<input type="button" value="submit" id="call_bck_btn"/>
</form>

<div id="resultTbl">
</div>
</body>
</html>

script.js:

$(function() {
   $('#conversationForm').submit(function(e) {
      $.post('ajax.php', $(this).serializeArray(), function(data, status, jqXHR) {
         $('.resultTbl').html(data);
      });
   });
});

ajax.php:

<?php
if( (isset($_POST['english']) && strlen($_POST['english']) > 0) && (isset($_POST['sanskrit']) && strlen($_POST['sanskrit']) > 0) ) {

   $mysqli = new mysqli('localhost','username','password', 'test2');
   if($stmt = $mysqli->prepare("INSERT INTO `conversation` (English, Sanskrit) VALUES (?,?)")) {
   $stmt->bind_param('ss', $_POST['english'], $_POST['sanskrit']);
   $stmt->execute();
}

$result = $mysqli->query("SELECT English, Sanskrit FROM `conversation`", MYSQLI_STORE_RESULT);
echo '<table>';
while($row = $result->fetch_array()) {
   echo '<tr>';
   echo '<td>', $row['English'], '</td>';
   echo '<td>', $row['Sanskrit'], '</td>';
   echo '</tr>';
}
echo '</table>';
?>

Need Your Help

PDFRenderer.jar version

java jar pdf-generation version pdfrenderer

I have a project which uses PDFRenderer.jar v1.0.5 which was probably downloaded from http://grepcode.com/snapshot/repo1.maven.org/maven2/org.swinglabs/pdf-renderer/1.0.5

Jquery fadeToggle doesn't work

javascript jquery html opencart

I need to fadeToggle some classes when I am hover on image. I am using Opencart.