编辑:
有些人建议直接在表单上调用submit。但这不是我想要的。我想要的是,能够在input type='submit'上调用click()事件,并像通常一样提交表单。jQuery UI对这种正常行为似乎产生了干扰。请查看我创建的jsFiddle链接,因为问题可以在其中重现。
(首先,我已经在StackOverflow上看到了类似的问题,但答案在我的情况下不起作用:jQuery UI带有ASP.NET按钮后台提交)
期望的行为:
在我的页面上,我有一个隐藏的字段和一个提交按钮(通过CSS隐藏)。我想使用JavaScript编程方式点击此按钮,从而导致提交表单。最重要的是....我想从jQuery UI Dialog内部触发所有这些内容。基本上,用户将在jQuery UI对话框中进行选择,从而导致整个页面被提交并重新加载。
问题陈述
这样触发按钮点击通常很好地提交表单。但是,当在jQuery UI Dialog中触发动作时,它会失败。
正如您在我的jsFiddle代码中所看到的那样,我在提交按钮上调用了jQuery的click()函数....但表单实际上并没有提交!JavaScript确实点击了该按钮,但“表单提交行为”本身并未发生。页面未被发布。
我认为jQuery UI对我试图以编程方式单击的按钮的表单提交行为产生了干扰。
我想编程触发按钮单击的原因:
我不能将位于对话框内部的按钮本身作为提交按钮。在我的情况下,我创建了一个可重用的JavaScript控件,包装了一个jQuery UI对话框。此JS控件允许用户选择员工。但是,当选择员工时,期望的行为不会总是是:表单提交。(有时我可能只想在页面上显示选定的员工而不执行提交。)
其他细节:
此问题不特定于ASP.NET,但以下是一些附加详细信息,以帮助解释我为什么要进行所有这些尝试。我正在使用.NET 4.5编写ASP.NET Web Forms应用程序。我已经开始在我的页面中更多地使用JavaScript,但在这个特定的页面上,我想触发对服务器的实际回传,以便我可以处理来自ASP.NET页面生命周期的按钮单击事件并填充GridView。这就是为什么我想能够使用JavaScript单击asp:button,反过来导致表单提交。
最重要的是......亲自尝试--->请参见下面的jsFiddle链接.....
再次强调,此问题与ASP.NET无关。我已经能够在JsFiddle上使用常规HTML和jQuery UI重现同样的问题。以下是JsFiddle链接:
如您在代码中所看到的,我已尝试使用将jQuery UI Dialog通过jQuery DOM操作移动到表单内部的“修复”方法。这似乎并没有解决问题。
谢谢!我感激任何帮助!
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
JavaScript
$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm').click();
//alert($('#hdnEmployeeChosen').val());
});
});
CSS
:CSS是层叠样式表的缩写,用于设置网页的样式和布局。它可以控制文本、颜色、背景、边框等元素的外观,并通过盒模型来控制元素的位置和尺寸。form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}