如何使用 javascript 更改哪个按钮具有 <form> 语句中定义的默认操作

Posted 2023-04-01

【中文标题】如何使用 javascript 更改哪个按钮具有 <form> 语句中定义的默认操作

【英文标题】：How to change which button has the default action as defined in the <form> statement, using javascript

【发布时间】：2021-10-26 20:14:27

【问题描述】：

这是一个基于 c# asp.net 的环境，在呈现的页面上运行 [webmethod] 代码隐藏和 PageMethods 以调用代码隐藏。

我使用 asp：类型标签、文本框、按钮和验证器。我有几个按钮在流程的不同点变得可见。表单上还有字段验证器 (asp:RequiredFieldValidator)，它在按下 Enter 键或单击“DefaultButton”时触发。我希望进行验证，但是我希望更改 DefaultButton 以便永远不会再次执行触发的函数。也就是说，如果按下回车键，则在任何时候都会触发 DefaultButton（以及相关的 OnClientClick 事件）。我希望更改 DefaultButton 使用 javascript 的内容。

表格上是：

<form id="form1" runat="server" DefaultButton="btnCreateAccount">
.
.
.
<asp:Button ID="btnCreateAccount" runat="server" Text="Signup" style="display: inherit;" OnClientClick="ValidEmailTest(); return false;"/>
<asp:Button ID="btnVerifyAccount" runat="server" Text="Verify Mail Account" style="display: none;" OnClientClick="TestSetup(); return false;"/>
<asp:Button ID="btnValidate" runat="server" Text="Check Verification Code" style="display: none;" OnClientClick="Validation(); return false;"/>

我相信，如果我可以将 DefaultButton 的值更改为不同的按钮，那么当填充新公开的字段并按下 Enter 键时，将验证字段并执行该按钮的“OnClientClick”操作。我正在寻找“DefaultButton”的值，或者它可以在哪里修改，所以我知道可以改变什么。

我试过了：

xyz = document.getElementById('<%= form1.ClientID %>')..getdefaultbutton;
alert ("Default Button is: "+ xyz);

结果：“默认按钮为：未定义”

xyz = document.getElementById('<%= form1.ClientID %>').getAttribute("DefaultButton");
alert ("Default Button is: "+ xyz);

结果：“默认按钮为：null”

var xyz = document.getElementById('<%= form1.ClientID %>').getAttributeNames();
alert ("Attributes are: "+ xyz);

结果：“属性为：method,action,onkeypress,id”

我不想要帖子或回电，因为所有内容都作为在代码隐藏异步中运行的页面方法运行。并将结果传递到页面。任何调用或回发都会刷新页面并重置页面显示的内容和用户输入的值，或者系统已返回。

建议？

【问题讨论】：

将类型更改为“提交”？

【参考方案1】：

尝试将默认按钮的类型更改为“提交”。

喜欢：

myButton.type = "submit"; 

尝试阅读此答案： How to set the default button in content page using asp.net?

【讨论】：

这会将页面提交到代码隐藏，这会将页面重置为默认值，包括擦除页面上保存的所有数据，对吗？我在页面上触发函数，而不是提交页面。

如果您的代码接受并验证数据，页面将重新加载为空如果您遇到验证错误，我认为您的页面不会被清理。

这是一个调用代码隐藏 (AJAX) 的动态页面，共有 3 个不同的函数，它们是使用对 c# 代码的调用生成的。想想银行交易。您不想清除屏幕上显示的数据。它是一个异步进程，返回的值要么促进进程，要么引发错误。然后，用户可以修复错误（例如，为卡输入了错误的邮政编码或 CCV），而不会破坏客户网页上的信息。

我也试过：``` function getdefaultbutton1() alert("Default Button failed"); this.Page.Form.DefaultButton = Button2.UniqueID; function getdefaultbutton2() alert("默认按钮 2 被触发");

我看过你上面引用的文章。如果我有面板或其他格式架构，那就太好了。此表单只有用户输入的 6 个信息字段，后面的代码经过多达 37 次不同的迭代来确定要使用的正确配置。使用回调或其他方法会产生大量的通信开销，因为动态更新以异步方式发送回用户，更不用说页面的持续闪烁，因为它每 5-10 秒更新一次。

【参考方案2】：

似乎没有办法直接修改哪个按钮是默认按钮。我设计了一个解决方法（不是雄辩，但有效）。由于用户只能输入 6 个字段，因此使用面板或多个 <div> 没有任何意义。此外，此过程与代码隐藏完全异步通信（这是设计代码操作的好方法，而不是阻塞线性编程）。

我决定不尝试更改哪个按钮是 DefaultButton，而只是更改 DefaultButton 引用的按钮的显示值。然后消除了两个我不需要显示或不显示的额外按钮。

我创建了一个名为clickConductor() 的函数，它是默认按钮分配的OnClientClick 调用函数。这样，在成功执行 PageMethods 调用结束时，我可以控制如何处理要执行的下一个函数。

<%-- This is a function I created to send the default button to the proper selection --%>
        function clickConductor() 
            switch (currentFunction) 
                case 1:
                    validEmailTest();
                    break;
                case 2:
                    testSetup();
                    break;
                case 3:
                    validation();
                    break;
            
        

通过仅更改特定 PageMethods 调用的成功函数调用中的 currentFunction，我可以对按钮的值（显示的信息）进行适当的更改，如果调用的代码隐藏函数返回错误条件，则不会发生这种情况.

        function TEonSuccess(result) 
           verificationCode = result[1];
           document.getElementById('<%= btnClicker.ClientID %>').value = "Check Verification Code";
           document.getElementById("verificationArea").style.display = "inherit";
           document.getElementById('<%= txtVerificationCode.ClientID %>').value = "";
           document.getElementById('<%= txtVerificationCode.ClientID %>').focus();
           currentFunction = 3;
        

我希望这可以帮助那些因 DefaulButton 和随之而来的默认“输入键操作”问题而烦恼的其他人，而不必求助于复杂的 <div> 或面板结构。