Question

Scenario:
Using jquery form plugin . The form appears in a dialog, created with jquery UI. After clicking submit a success message appears on the form. What I would like to do is to have the dialog fade out after the success message appears.

Problem:
I’m unclear how to structure the code to close on success and where to put the code.

In the following I attempted to add a “success function” to the script that is triggered on clicking the submission of the form as follows:

$(document).ready(function() {
var options = {
    target : '#output1',
    url:    'comments.php',
    clearForm:  'true',
    success:    function {
        $dialog.dialog('close');
    }
};
// bind 'myForm' and provide a simple callback function 
$('#brokenLinks').ajaxForm(options);
return false;
});

However, this breaks the script and clicking the submission button causes the php script with success message to load in the window, as opposed to the desired behavior of staying on the form page.

Can anyone point me to examples of how to fade out a dialog after form submission, or suggest how this needs to be architected.

Thanks.

Additional Code

FORM

                    </p>
                    <p>
                        <input name="nowhere" value="linknowhere" type="radio">Link is
                        broken and doesn't go anywhere
                    </p>

                    <p>
                        <input name="wrong_url" value="linktowrongurl" type="radio">Link
                        goes to an unexpected destination
                    </p>
                    <p>
                        <input name="other" value="linkother" type="radio">Other -
                        Please explain in the description box below
                    </p>
                    <em>Description</em>
                    <p>Please add as much descripton as you can about the problem you
                        noticed</p>
                    <textarea class="tagged" name="description" id="area" cols="50" rows="10" title="Please add as much description as you can."></textarea>

                    <p>
                        Page Address: <br> <input name="url" value="" id="targetURL" size="100" title="Page Address" type="text">
                    </p>
                    <p>
                        Browser<input name="browser" value="Firefox" type="text">
                    </p>
                    <p>

                        Operating System<input name="operating_system" value="MacOSX" type="text">
                    </p>
                    <p>
                        <input name="submit" id="button" value="Submit" type="submit">
                    </p>
                </fieldset>
            </form>
    <!-- server response -->

            <h2 class="testColor">Output Response</h2>
            <div id="output1" class="testColor">

            </div>
            <!--End broken links FORM-->

Dialog Generating Script

$(document).ready(function() {


$('#target a').each(function() {
    var $link = $(this);
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            title: $link.attr('title'),
            width: 700,
            height: 800,
            modal:  true,
            open:   function (event,ui) {
                $("input[name='url']").val(pageAddress);


            }
        });

    $link.click(function() {
        $dialog.dialog('open');
        $( "#accordion" ).accordion({
            collapsible: true,
            active: false
        });
        return false;
    });
});
});

Host Page

<!-- Checks for presence of cookie. If present sets a php flag to indicate that cookie is present. This flag is read into Javascript in another script -->
<script type="text/javascript">
var readerStatus="tester";

if (readerStatus=="tester")  {
$(function() {
    $( "#dialog" ).dialog();
});
};
</script><!-- If tester flag is set then show the feedback button -->
<script type="text/javascript">
var pageAddress="http://localhost/Formdev/rc2feedbackform/page3_blogpage1.php";
</script><!-- Reads the url of the page and stores it as a Javascript variable -->

</head>

<body>

<div id="dialog" title="Feedback Button">
<div  title="Feedback Form">
    <p id='target'><a href="feedbackform.php"  title='Feedback Form' >Click Here   For Feedback Form</a></p>
    <p class="notes">This form is dragable and resizable</p>

</div>
</div><!-- This is the text for the tester button -->
<!--------------------------------------------------------------------------->
<!-- Start The Page Display -->
<h1>Page 1 Of The Blog</h1>
<p class="blueborder  textColor">This page simulates the page on the blog where testers will land. A button appears on this page with the title feedback form. Click on the button and the feedback form will appear. You can then complete the form. When you are done click on the submit button. If the forms is successfully recorded you will see a message telling you its been recoreded.    </p>






</body>

Answer 1

You have to submit the form using ajax to prevent the new page from loading. then use the callback in the ajax function to perform the .fadeout() on the div/form

edit: i misunderstood the question. can probably help if you show the function called when the submit/login button is clicked