How can I dynamically load user-entered data as content of jquery dialog?

Hi I can't seem to work my javascript. I cannot seem to figure out whatelse I am missing. Kindly guide me how to solve my project please. I cannot make the value of user-entered name to show in the dialog content. I am also trying to echo this from a php file where my form is validated. Below is my code. Thanks in advance.

<?php
echo " <script type=\"text/javascript\">
    function showDialog(){

        var visitorName = $('#firstName').val();
        var myDialog = $('#acknowledge').dialog();

        myDialog.dialog({
            autoOpen:false,
            modal:true,
            buttons:{
                Close:function(){
                    $(this).dialog('close');
                    }
                    },
            title:'Form sent',
            height:'auto',
            hide:{
                effect:'explode', 
                duration:1000
                }

            });


            myDialog.dialog('open');
            myDialog.html(visitorName); 


    }
    showDialog();
    </script>";
?>