New to Javascript and Need Help to Troubleshoot the Script
<p>I have a code based on the jquerytools demo and trying to find out what I am doing wrong.</p>

<p>Complete Code:</p>

<pre><code>&lt;style&gt;
    .modal {
        background-color:#fff;
        display:none;
        width:350px;
        padding:15px;
        text-align:left;
        border:2px solid #333;

        opacity:0.8;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -moz-box-shadow: 0 0 50px #ccc;
        -webkit-box-shadow: 0 0 50px #ccc;
    }

    .modal h2 {
        background:url(../images/info.png) 0 50% no-repeat;
        margin:0px;
        padding:10px 0 10px 45px;
        border-bottom:1px solid #333;
        font-size:20px;
    }
&lt;/style&gt;

&lt;script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function() {
        var triggers = $(".modalInput").overlay({
            // some mask tweaks suitable for modal dialogs
            mask: {
                color: '#ebecff',
                loadSpeed: 200,
                opacity: 0.9
            },
            closeOnClick: false
        });



        $("#prompt form").submit(function(e) {

            // close the overlay
            triggers.eq(1).overlay().close();

            // get user input
            var input = $("input", this).val();

            // do something with the answer
            triggers.eq(1).html(input);

            // do not submit the form
            return e.preventDefault();
        });
    });
&lt;/script&gt;



&lt;p&gt;
    &lt;button class="modalInput" rel="#prompt"&gt;User input&lt;/button&gt;
    &lt;button class="modalInput" rel="#prompt"&gt;User input&lt;/button&gt;
    &lt;input type="text" name="in1"&gt;


&lt;/p&gt;


&lt;!-- user input dialog --&gt;
&lt;div class="modal" id="prompt"&gt;
    &lt;h2&gt;This is a modal dialog&lt;/h2&gt;

    &lt;p&gt;
        You can only interact with elements that are inside this dialog.
        To close it click a button or use the ESC key.
    &lt;/p&gt;

    &lt;!-- input form. you can press enter too --&gt;
    &lt;form&gt;
        &lt;label&gt;HOT&lt;/label&gt;&lt;input type="radio" id="1" name="sl" value="1"/&gt;
        &lt;label&gt;Medium&lt;/label&gt;&lt;input type="radio" id="1" name="sl" value="2"/&gt;
        &lt;label&gt;Mild&lt;/label&gt;&lt;input type="radio" id="1" name="sl" value="3"/&gt;
        &lt;button type="submit"&gt; OK &lt;/button&gt;
        &lt;button type="button" class="close"&gt; Cancel &lt;/button&gt;
    &lt;/form&gt;
    &lt;br /&gt;

&lt;/div&gt;
</code></pre>

<p>Problem:</p>

<p>The dialog does not bring value back to the parent window when remove one of the  tag from the following.</p>

<pre><code>&lt;button class="modalInput" rel="#prompt"&gt;User input&lt;/button&gt;
&lt;button class="modalInput" rel="#prompt"&gt;User input&lt;/button&gt;
</code></pre>

<p>Looks like something is not write in the Javascript function that I am not able to see.</p>

<p>Also I would like to store this value in a input. Now I tried the following but how do I get the value from a function into the input.</p>

<pre><code>&lt;input type="text" name="in1" id="something from function"&gt;
</code></pre>

<p>Can you please advise?</p>
