成功后如何淡出对话框中的表单
场景： 使用 jquery 表单插件 。该表单出现在使用 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 脚本加载到窗口，而不是停留在表单页面上的期望行为。
任何人都可以向我指出如何在表单提交后淡出对话框的示例，或者建议如何构建它。
谢谢。
附加代码
表格
</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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您必须使用 ajax 提交表单以防止加载新页面。然后使用ajax函数中的回调对div/form编辑执行.fadeout()
：我误解了这个问题。如果您显示单击提交/登录按钮时调用的函数，可能会有所帮助
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