I want to "Hide" the table during the starting of page, which is working using $(document).ready(function(){$("#result").hide();});
But I also want to "show" the table once the submit button is clicked, which is not working.
This is the PHP file, as I have to add more PHP code afterwards. Same result if I change this to HTML thou.
<!DOCTYPE html>
<html lang ="en">
<head>
<title> Show Specific </title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#result").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#result").show();//result
});
});
</script>
</head>
<body>
<hr>
<div id="appointment">
<form>
Test ID: <input type="text" name="testID" /> <br><br>
First Name : <input type="text" name="First_Name" /> <br><br>
Last Name : <input type="text" name="Last_Name" /> <br><br>
<input id="submit" type="button" value="Submit" ><br><br>
</form>
</div>
<div id="result">
<table>
<tr>
<th>Test ID</th>
</tr>
<tr>
<th>First Name </th>
</tr>
<tr>
<th>Last Name</th>
</tr>
</table>
</div>
<hr>
<div id="footer">
<footer> Copyright © ALL RIGHTS ARE RESERVED. </footer>
</div>
</body>
</html>
If you look carefully, the id of your input button is submit not button as you have written on your jQuery event handler.
Change your script to this one:
<script>
$(document).ready(function(){
$("#result").hide();
$("#submit").click(function(){
$("#result").show();//result
});
});
</script>
Also: it is not necessary for you to have two $(document).ready() methods. Just implement one, and then add your function inside.