Note that there are some explanatory texts on larger screens.

plurals
  1. POEnterpress event in ASP.NET & jQuery click simulation
    text
    copied!<p>I have two form elements on my page that act as a smooth login panel. When you activate the panel, you can enter in your email address and your password to login. Next to them is an <code>&lt;asp:LinkButton...</code> with a C# function bound as a click handler. That function will post to another login page (we must do it this way based on how our app is interacting with the other site) and set some login cookies. When I enter in my credentails and physically click the button, everything works fine. When I enter my email, then my password, then hit the [ENTER] key, the click handler of the login button does not fire. Ok, so what? I've dealt with this before. Here are all of the methods I've tried to fix this with <strong>no success</strong>:</p> <hr> <p>Added an extra hidden textbox after the login button</p> <pre><code>&lt;asp:TextBox ID="tb1" runat="server" Style="display:none; visibility:hidden;"&gt;&lt;/asp:TextBox&gt; </code></pre> <p>No success.</p> <hr> <p>Set the <code>DefaultButton</code> attribute on the form (since I'm in a MasterPage):</p> <pre><code>&lt;form DefaultButton="lbLogin"&gt; </code></pre> <p>No success.</p> <hr> <p>Wrapped my fields in an <code>&lt;asp:Panel ... &gt;</code> and set the <code>DefaultButton</code> attribute</p> <pre><code>&lt;asp:Panel ID="pnlFields" DefaultButton="lbLogin" runat="server"&gt;... my stuff here ...&lt;/asp:Panel&gt; </code></pre> <p>No success.</p> <hr> <p>Started to capture the enterpress via jQuery:</p> <pre><code>// if I hit enter on ANY input, simulate a click of the login button $(".login-fields input").keypress(function(e) { if ((e.which &amp;&amp; e.which === 13) || (e.keyCode &amp;&amp; e.keyCode === 13)) { $(".btnLogin").click(); return false; } }); </code></pre> <p><code>$(".btnLogin").click();</code> didn't work so I tried <code>$(".btnLogin").trigger("click");</code>. No good. I also tried <code>$(".btnLogin").submit();</code> which I knew wouldn't work (but I tried anyway).</p> <p>Since there's a <code>return false</code> this just does nothing, so I removed it and tried the scenarios again. No dice.</p> <p>I've read before that <code>keypress</code> might not be a good JavaScript event so I tried <code>keyup</code> as well with the above scenarios and still got nothing.</p> <hr> <p>Now, here's the <strong>ONLY</strong> thing that seems to work and it involves using JavaScript <code>eval()</code>:</p> <pre><code>// if I hit enter on ANY input, simulate a click of the login button $(".login-fields input").keypress(function(e) { if ((e.which &amp;&amp; e.which === 13) || (e.keyCode &amp;&amp; e.keyCode === 13)) { eval( $(".btnLogin").attr("href") ); // BAD! right? } }); </code></pre> <hr> <p>Does anyone know how I can get this to work <strong>without</strong> doing the <code>eval()</code> in JS? For reference, this is the actual generated <code>href</code> of the login link:</p> <pre><code>javascript:__doPostBack('ctl00$lbLogin','') </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload