Question

情境： 使用jquery form plugin。该表单显示在使用jquery UI创建的对话框中。单击提交后，表单上将显示成功消息。我想要做的是在成功消息出现后淡出对话框。

问题： 我不清楚如何构建代码以关闭成功以及放置代码的位置。

在下文中，我尝试向单击表单提交时触发的脚本添加“成功函数”，如下所示：

$(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;
});

但是，这会破坏脚本并单击提交按钮会导致php脚本成功消息加载到窗口中，而不是停留在表单页面上的所需行为。

有人能指出我在表单提交后如何淡出对话框的示例，或者建议如何构建它。

感谢。

附加代码

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-->

对话框生成脚本

$(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;
    });
});
});

主页

<!-- 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

您必须使用ajax提交表单以防止加载新页面。然后使用ajax函数中的回调在div / form

上执行.fadeout（）

编辑：我误解了这个问题。如果您在单击提交/登录按钮时显示调用的函数，则可能会有所帮助

如何在成功后淡出对话框中的表单

1 个答案: