Question

我正在使用ASP.NET MVC4和jQuery进行一项调查。而且我不是网络开发人员，所以我遇到了一些困难时期。

我的网站包含（简要说明）顶级菜单和表单。表单是多步骤，提交按钮“previous”和“next”。我需要知道步骤类型，所以我命名了按钮，以便它们的值与其他字段一起传递。

当满足某些条件时，我需要在顶部菜单中显示一个额外的按钮（这不是表单的一部分;我们现在称之为“addButton”），单击这将导致表单提交。但我仍然需要知道“步骤类型”，所以我在表单中创建了一个隐藏的提交按钮（让我们称之为“opButton”），当我点击“addButton”时，我只需点击一些javascript / jquery来模拟点击“ opButton“：

onclick="$('#opButton').trigger('click');"

当我使用桌面浏览器时，一切都完美无缺 - Request对象中有一个合适的项目，它包含按钮的值。但是，当我在移动设备上工作时（使用Chrome的远程调试进行测试），没有这样的项目 - 我只是得到null，就是这样。

可能是什么原因？我很感激任何建议。

Answer 1

TLDR ：将event.preventDefault();添加到添加按钮的onclick处理程序，或确保添加按钮的输入正确type="button"。

默认情况下，如果在表单中，任何未指定其类型的button元素都会被视为提交按钮。因此，如果您未在HTML中指定type="button"，则无论何时通过事件处理程序为其提供任何其他行为，它都会在您点击它时触发表单提交。

**例外情况是您使用event.preventDefault();或同等的;或者如果您从处理程序返回false（否，these are not equivalent）。要么会阻止表单提交。*

如果您没有在添加按钮上指定type="button"，则会触发两个表单提交 - 第一个是提交按钮（#opButton）触发的点击;第二个是通过“原始”添加按钮单击。提交按钮首先进入表单提交，因为添加按钮将“等待”直到其所有onclick内容已执行，然后再转到其自己的默认提交。 sumbit按钮的“click”（因此它的表单提交）都在add按钮的onclick处理程序中调用，因此它将在最终退出该处理程序之前执行。

特殊的桌面与移动行为来自各种浏览器/操作系统组合处理竞争形式提交的方式：有些将在第一个之后阻止并且仅发送一个（#opButton提交）（我猜是为了尝试打击双击双提交问题），而其他人将开始处理第一个，但如果在卸载页面之前及时发送第二个。您的桌面测试正在执行前者，只处理第一个表单提交;你的移动测试正在做后者并允许最后一个表单提交“覆盖”第一个。

最终，您的代码无法告诉浏览器哪些内容可以说明：为了获得可靠的性能，您需要创建非提交按钮（#addButton）type=button或添加{ {1}}到您的（event.preventDefault();）事件处理程序，以便只提交一个表单提交。

Answer 2

当您处于移动环境中时，也许您的被点击事件不一样（“点击”），例如“点按”事件。试着检查一下。

另外，如果您不需要发送opButton，可以直接提交表单，而不是触发隐藏的提交按钮，例如

$('your_form').submit();

Answer 3

有时使用隐藏项目非常有用，因为每个浏览器根据您隐藏它的方式对它们进行不同的处理。

我的消化是摆脱隐藏的按钮。然后，您可以动态创建隐藏的<INPUT>，附加到表单，然后使用jQuery提交：

$(function() {
    $('<input>').attr({
        type: 'hidden',
        value: 'addButton',
        name: 'operation'
    }).appendTo('form');

    $('form').submit();
});

然后在您的请求对象上查找＆＃39;操作＆＃39; item并从中获取值。

jQuery触发器单击 - 请求中没有按钮值

3 个答案: