Form is undefined when passing its ID into a jQuery dialog
<p>I am trying to submit a form which is displayed in a jQuery dialog box. However I am having trouble passing the ID of the form into the dialog window. Here is the output shown by Chrome:</p>

<p><a href="http://i.stack.imgur.com/1EIa1.png" rel="nofollow">http://i.stack.imgur.com/1EIa1.png</a></p>

<p>I know the answer must be obvious but I can't work out why "frmDecline1" wouldn't be available to the JavaScript function?</p>

<pre><code>$(function(){
        // Dialog           
        $('#dialog1').dialog({
            autoOpen: false,
            width: 500,
            modal: true,
            buttons: {
                "Ok": function() { 
                    frmDecline1.submit();
                    $(this).dialog("close"); 
                }, 
                "Cancel": function() { 
                    $(this).dialog("close"); 
                } 
            }
        });

        // Dialog Link
        $('#dialog_link1').click(function(){
            $('#dialog1').dialog('open');
            return false;
        }); 
    });
</code></pre>

<p></p>

<pre><code>&lt;div id="dialog1" title="Decline Record"&gt;
        &lt;p&gt;Please enter your reason for declining this record below&lt;/p&gt;
        &lt;form id="frmDecline1" name="frmDecline1" method="post" action="index.asp?decline=1,ClockNo=1,JobNo=1"&gt;
        &lt;textarea name="txtDecline1" cols="40" rows="4"&gt;&lt;/textarea&gt;
        &lt;br&gt;
      &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p><code>&lt;a href='#' id='dialog_link1'&gt; Decline &lt;/a&gt; &lt;br&gt; &lt;br&gt;</code></p>
