JQuery Overlay - Callback
<p>I am javascript handicapped and need help with a jquery callback. When a user clicks an option select, if it says approved, it displays a jQuery modal with a simple user input asking for a code, when the user clicks submit, I would like to continue using that input in another ajax query. I dont know how to obtain the code the user inputs. The way I am doing it is doing a self GET request. I am sure I can do this callback without calling another function.
The JS:</p>

<pre><code>function changeStatus(status){
            var agencyid = &lt;?php echo $agencyid;?&gt;;
            var status = status;
            var carrier = document.getElementById('carrier').value;
            if(status == "Approved"){
                $('#overlay').fadeIn('fast',function(){
                    $('#box').animate({'top':'160px'},500);
                });
            $('#boxclose').click(function(){
                $('#box').animate({'top':'-200px'},500,function(){
                    $('#overlay').fadeOut('fast');
                });
            });
            }else{

            $.ajax({
                type: "POST",
                url: "ajax/changestat.php",
                data: "status="+ status + "&amp;agencyid="+agencyid + "&amp;carrier=" + carrier,
                success: function(html){
                    $("#change").append(html);
                }
            });
            }
            }
function showApproved(){
    var agencyid = "&lt;?php echo $agencyid;?&gt;";
    var carrier = "&lt;?php echo $carrier;?&gt;";
    var prodcode = document.getElementById('prodcode').value;
            $.ajax({
                type: "POST",
                url: "ajax/changestat.php",
                data: "status="+ status + "&amp;agencyid="+agencyid + "&amp;carrier=" + carrier+"&amp;prodcode=" + prodcode,
                success: function(html){
                    $("#change").append(html);
                }
            });

}
</code></pre>

<p>The form:</p>

<pre><code>&lt;div class="overlay" id="overlay" style="display:none;"&gt;&lt;/div&gt;
    &lt;div class="box" id="box"&gt;
        &lt;a class="boxclose" id="boxclose"&gt;&lt;/a&gt;
        &lt;p&gt;
            &lt;form onsubmit="showApproved()"&gt;
            &lt;label for="prodcode"&gt;Producer Code&lt;/label&gt;
            &lt;input type="text" id="prodcode" name="prodcode" max="15" maxlength="25"/&gt;
            &lt;input type="submit" value="Submit" class="boxclose" class="boxclose"/&gt;
            &lt;/form&gt;
        &lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>I know I am making this too complicated... 
I suck with JSFiddle too so here is my non working JSfiddle <a href="http://jsfiddle.net/8GXHf/" rel="nofollow">Click</a></p>
