Trying to make a modal dialog appear with jQuery and PHP

I have a email button, that when clicked, should pop up a modal jQuery UI dialog that shows a button for emailing yourself. My code is here:

<input type="button" value="Email to me" onClick="$("#emailModal").dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/>

And here is #emailModal:

<div id="emailModal">
<p><input type="button" value="Email to me" onClick="$('#emailPost').submit()" id="emailJQButton"/></p>
&开发者_开发知识库lt;/div>

However, when I click on the button, nothing happens, and no dialog pops up. I've looked through all my code and can't find the problem. Any help?

Edit: Found the problem but I have a further one:

if($_SESSION["loggedIn"] == 1)
                        {
                            echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost'>";
                            echo "<input type='hidden' value='" . $_SESSION["email"] . "' name='emailAddress'>";
                            echo "<input type='button' value='Email To Me' onClick='$(\"#emailPost\").submit();$(\"#emailModal\").dialog('close');'/>";
                            echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>";
                            echo "</form>";
                            echo "<h3>Or</h3>";
                            echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>";
                            echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>";
                            echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>";
                            echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>";
                            echo "</form>";
                        }
                        else
                        {
                            echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>";
                            echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>";
                            echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>";
                            echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>";
                            echo "</form>";
                        }

I'm displaying it with PHP echo now, and I know that should require some special escaping rules. Neither inline function works though, not the emailPost submit nor the dialog close.

You cannot use " in attributes if they are quoted with ", too. Use '#emailModal' instead of "#emailModal".

However, the proper solution would be this:

<input type="button" value="Email to me" id="emailButton" />
<script type="text/javascript">
    $('#emailButton').click(function(e) {
        e.preventDefault();
        $("#emailModal").dialog({title:'Email It Along', height:300, width:350, modal:true, resizable:false});
    });
</script>

You have a typo in your code (apostrophes)

onClick="$("#emailModal").

should be

onClick="$('#emailModal').

The problem is in the onClick for the button, you have double quotes inside double quotes.

onClick="$("#emailModal").dialog({...

I suggest you don't use onClick and you use jQuery to bind the events instead.

<input type="button" value="Email to me" id="sendEmail" />

<div id="emailModal">
  <p><input type="button" value="Email to me" id="emailJQButton"/></p>
</div>

<script>
  $(function(){
    $("#emailModal").dialog({
      title: 'Email It Along',
      height: 300,
      width: 350,
      modal: true,
      resizable: false,
      autoOpen: false
    });

    $('#sendEmail').click(function(){
      $("#emailModal").dialog('open');
    });

    $('#emailJQButton').click(function(){
      $('#emailPost').submit();
    });
  });
</script>

OTOH i think you should use

<input type="button" value="Email to me" onClick="$('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/>

EDIT

Or as ThiefMaster said try using something in the lines of

$(function(){
    $('#myinput').click(function(){
        $('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false})
    });
});