Quiero "Ocultar" la tabla durante el inicio de la página, que funciona usando $(document).ready(function(){$("#result").hide();}); Pero también quiero "mostrar" la tabla una vez que se hace clic en el botón Enviar, que no funciona.
Este es el archivo PHP, ya que tengo que agregar más código PHP después. Mismo resultado si cambio esto a HTML tú.
<!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>Si observa detenidamente, la id de su botón de entrada es submit , no el button como ha escrito en su controlador de eventos jQuery.
Cambia tu script a este:
<script> $(document).ready(function(){ $("#result").hide(); $("#submit").click(function(){ $("#result").show();//result }); }); </script> Además: no es necesario que tengas dos métodos $(document).ready() . Simplemente implemente uno y luego agregue su función dentro.