How do i display data in the same page while using a form in a html doc?
Question
I've used javascript and php to get data from the database and then posting it on the same page. I've got the output for that. But when i'm using tag, the data is not being retrieved instead the page is just being refreshed and nothing happens. Can someone please help me in getting the output while using the tag. Thanks in advance.
HTML FILE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Enter MMTI Number: <input type="text" name="EnrNo" id="EnrNo" /><br/><br />
<input type="submit" name="retrieve" value="submit" id="EnrNo-sub" />
<div id="EnrNo-data"></div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$('#EnrNo-sub').on('click', function() {
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {EnrNo: EnrNo}, function(data) {
$('div#EnrNo-data').html(data);
});
}
});
</script>
</body>
</html>
PHP FILE:
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'DB';
$db = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
if(mysqli_connect_errno())
{
die("connection couldn't be established");
}
if(isset($_POST['EnrNo']) === true && empty($_POST['EnrNo']) === false) {
//$Enr = $_POST['EnrNo'];
$EnrNo = mysql_real_escape_string ($_POST['EnrNo']);
$query = "Select * FROM cert WHERE EnrNo = '$EnrNo'";
$result = $db->query($query);
$total_num_rows = $result->num_rows;
while ($row=$result->fetch_array())
{
echo "Enr. No: MMTI- " .$row["EnrNo"].'<BR />';
echo "Name: " .$row["Name"].'<BR />';
echo "Batch Code: " .$row["Batch Code"].'<BR />';
echo "Start Date: " .$row["Start Date"].'<BR />';
echo "End Date: ".$row["End Date"].'<BR />';
echo "Course: " .$row["Course"].'<BR />';
echo "Duration: " .$row["Duration"].'<BR />';
} mysqli_free_result($result);
} else {
echo ('Data not found');
};
?>
3 answers
solution1
1 ACCPTED 2015-04-27 05:52:10
You need to stop form from submitting and refreshing page: You can use event.preventDefault() or return false on your event handler.
$(document).ready(function () {
$('#EnrNo-sub').on('click', function (e) {
e.preventDefault(); // Stop default action of submit form
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {
EnrNo: EnrNo
}, function (data) {
$('div#EnrNo-data').html(data);
});
}
});
});
solution2
0 2015-04-27 05:53:29
You could use a button instead of a submit for your button-element, or you could prevent the default action for the button in your click-Event handler:
$('#EnrNo-sub').on('click', function(ev) {
ev.preventDefault();
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {EnrNo: EnrNo}, function(data) {
$('div#EnrNo-data').html(data);
});
}
});
solution3
0 2015-04-27 06:06:55
You need to stop page refresh. Your data is not updated because of page refresh.
$('.click').click(function(e){
e.preventDefault();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.