Message:

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 &copy; ALL RIGHTS ARE RESERVED. </footer>

            </div>



       </body>

</html>

My Answer:
The issue you are facing is most likely due to the fact that when the page is refreshed, the jQuery event listeners are not reattached to the elements. To solve this issue, you can use event delegation or attach the event listeners after the page is loaded.

Here is an updated version of your code using event delegation:

html







    Show Specific

    

    

    

    



   



    


      

    

        

            Test ID:  



            First Name :  



            Last Name :  



             



        


    


        

    

        












             
                Test ID
            

            
                First Name 
            

            
                Last Name
            
        


    


                    

    




    

           Copyright © ALL RIGHTS ARE RESERVED.

In this updated code, the event listener for the submit button is attached using event delegation. This ensures that the event listener will work even after the page is refreshed.

John Davidson

javascript - jQuery function is not working in PHP once the page is refreshed

Rate this post

Comments