MVC2: Set default button for 'Enter' Key RSS

• • Reply
  

  melton16

  Member

  64 Points

  92 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Dec 30, 2010 07:35 PM|LINK

  What you explained in your last post is where I am getting lost.

  When I actually click the "Next" button, The controller action is called with the "submitButton" key in the FormCollection.

  That meets my needs.

   

  I want the Enter keypress to perform the same task.

   

  The javasacript in my "About" form does catch the keypress as proven by the Alert.  Thats part of the battle won.

   

  1) Why does the controller action not get called unless I click inside the txtBox first and then press "Enter"?

   

  The javascript is calling  .click() for the button.

   

  2) I thought that this would work the same as if the button itself was actually clicked by the mouse.  That would send my "submitButton" key through the FormCollection.  Why does this not work?

   

  I know you have already explained much of this.  I am beginning to understand and just need a little more clarification. 

   

   

• • Reply
  

  sachingusain

  Star

  8786 Points

  1702 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Dec 30, 2010 07:39 PM|LINK

  melton16

  $('button[type=submit] .NavButton').click();      

   

  For the time being you can change the above statement with following and your form would be submitted and that is (perhaps) what you want:

  $("form").submit();
  

  I am looking into why the button click did not work. 

  Please "Mark As Answered" if it helped you.
  
  Thanks.
• • Reply
  

  sachingusain

  Star

  8786 Points

  1702 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Dec 30, 2010 07:56 PM|LINK

  Okay, this has been crazy but here you go.

  Note the changes I made to access the "submit" button in jQuery. You can use the one that is there or the commented one, both should work.

  The trick was to add id="submitButton" attribute in the HTML tags for SUBMIT buttons and voila!!

  <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
  
  
  <asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
      About Us
  </asp:Content>
  
  
  <asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
  
  
      <script type="text/javascript">
  
  
          $(document).ready(function () {
              $(document).keypress(function (e) {
                  //alert("You pressed: " + e.keyCode);
                  if ((e.which == 13) || (e.keyCode == 13)) {
                      alert("You pressed enter");
                      //$("#submitButton").click();
                      $(":submit").attr("class","NavButton").click();
                  }
              });
          });
  
  
      </script>
  
  
      <h2>About</h2>
      <p>
          Put content here.
      </p>
  
  
      <p>
          <% Html.BeginForm("Index", "Home", FormMethod.Post); %>
          <%=Html.TextBox("txtBox","hello there") %>
          <input class="NotNavButton" type="submit" name="cmdsubmitButton" id="cmdsubmitButton" value="Previous" />
          <input class="NavButton" type="submit" name="submitButton" id="submitButton" value="Next" />
          <% Html.EndForm(); %>
      </p>
  
  
  </asp:Content>

  
  Hope I am done after this. Deserve a treat

   

  Please "Mark As Answered" if it helped you.
  
  Thanks.
  • Marked as answer by melton16 on Dec 30, 2010 08:06 PM
• • Reply
  

  melton16

  Member

  64 Points

  92 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Dec 30, 2010 08:00 PM|LINK

  I made the change to the line below.  

  This does allow the calling of my controller action that I want.  Now I just need to send the "submitButton" key.  This key should be assigned the value of "Next" since that is the "value" of the submit button defined in the following line:
  <input class="NavButton" type="submit" name="submitButton" value="Next" />

  
  I'm not sure how to accomplish this using the hidden input tag you mentioned above:

  "What you can do is have a INPUT TAG with TYPE HIDDEN and set it's value (to something relevant to you) on keydown event. This would be there in the FormCollection for processing and do what you need to do."

  I havent used a INPUT TAG with TYPE HIDDEN before.  Can You give me more detail for this approach?

   

   

• • Reply
  

  melton16

  Member

  64 Points

  92 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Dec 30, 2010 08:03 PM|LINK

  I just saw your reply after my last post.   I really appreciate all your time and effort!!!!!!

  Have a Great New Year!  

• • Reply
  

  melton16

  Member

  64 Points

  92 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Jan 04, 2011 09:20 PM|LINK

  I have implemented the javascript fix above successfully throughout my app but have hit a problem on one of my Views/Actions. I have the following View (edited to only show inputs).
  

  <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<OER.Models.UserLoginEntry>" %>
  
  
  <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  	EventContactInfo
  </asp:Content>
  
  
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  
  
      <script type="text/javascript">
          $(document).ready(function () {
              $(document).keypress(function (e) {
                  //alert("You pressed: " + e.keyCode);
                  if ((e.which == 13) || (e.keyCode == 13)) {
                      //alert("You pressed enter");
                      //alert(document.getElementById('submitLogin').className);
                      //$("#submitButton").click();
                      $(":submit").attr("class", "defaultNavButton").click();
                  }
              });
          });
      </script>
  
  
      <% using (Html.BeginForm()) {%>
  
  
  			<% if ( Model.IsLoggedIn != true ) { %>
  
  
                      <input class="LoginFunctionButtons"  type="submit" name="submitButton" id="submitForgotLogIn"    value="I forgot my User Name and/or Password" />
                      <input class="LoginFunctionButtons"  type="submit" name="submitButton" id="submitCreateAccount"  value="Create New Account" />
  
  
                      <input class="NavButton"        type="submit" name="submitButton" id="submitPrev" value="Previous" />
                      <input class="defaultNavButton" type="submit" name="submitButton" id="submitLogin" value="Login" />
  
  
              <% } %>
              <% else %>
              <% { %>
  
  
                      <input class="LoginFunctionButtons"  type="submit" name="submitButton" id="submitEditProfile" value="Edit Profile" />
                      <input class="LoginFunctionButtons"  type="submit" name="submitButton" id="submitLogOut"      value="Log Out" />
  
  
                      <input class="NavButton"        type="submit" name="submitButton" id="submitPrev2" value="Previous" />
                      <input class="defaultNavButton" type="submit" name="submitButton" id="submitNext" value="Next" />
  
  
              <% } %>
  
  
      <% } %>
  
  
  </asp:Content>

   

  The following Controller Action:

  [HttpPost]
  public ActionResult UserLogin(FormCollection frmCollection, UserLoginEntry entry)
  {
  	string strPageToShow = "";
  	int intPassLength = 0;
  	string strButtonClicked = "";
  
  	// Determine which button on the View was clicked
  	var fcButtonClicked = "";
  	fcButtonClicked = frmCollection.GetValue("submitButton").AttemptedValue;
  	strButtonClicked = System.Convert.ToString(fcButtonClicked);
  

  
  
   If I actually click the buttons on the View, strButtonClicked is assigned the expected value.  If I use the "Enter" keypress I am receiving a different value from the FormCollection. I receive "I forgot my User Name and/or Password". 
  I do not see any reason this should fail since it works on all other pages.

• • Reply
  

  sachingusain

  Star

  8786 Points

  1702 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Jan 04, 2011 09:55 PM|LINK

  I would suggest that you open a new thread for a new issue. 

  Please "Mark As Answered" if it helped you.
  
  Thanks.
• • Reply
  

  melton16

  Member

  64 Points

  92 Posts

  Re: MVC2: Set default button for 'Enter' Key

  Jan 04, 2011 10:04 PM|LINK

  Ok...  I will do that now...  Thank You