iPhones search button on keyboard not redirecting to correct page

125 Views Asked by At

I got a search bar and search button on the Master page. To handle the enter or search button of mobile keyboard, i've a function that checks for keycode event. the function will trigger a click event for search button if the keycode is the search key. Everything works with Android phones but in iPhones, when current page is the home page, it is redirecting to the search results page (which is the correct page) but other than that it will always go to home page instead. I've tried several solutions i've found but to no luck. Some of the solutions i tried were changing window.location.href, window.location.replace, placing a css cursor:pointer and onclick attribute on the search button but none of this worked.

I'm at lost on how the search button on iPhones works.

UPDATE: I placed an alert after the btn.click() line to display action attribute on the form. Surprisingly, after clicking ok on the alert it will redirect to the correct page and then i removed the alert and it goes back to the same error. I'm going crazy.

HTML:

<asp:TextBox ID="searchboxMobile" runat="server" CssClass="m-index-tbx-
  search search-div-textbox" Text="Type Part Number Here"         
  onfocus="OnSearchBoxFocus('searchboxMobile');"         
  onblur="OnSearchBoxLostFocus('searchboxMobile');"         
  onkeypress="doClick('searchButtonMobile', event);" ></asp:TextBox>
<asp:Button ID="searchButtonMobile" runat="server"
    PostBackUrl="~/SearchResults.aspx"
    formnovalidate="formnovalidate" CssClass="search-button m-search-button" />

jQuery - the function seems to be working as it was able to captures the search key or enter key but the click event seems to be not working properly. I've replaced this code with window.location.href = "~/SearchResults.aspx" and window.location.replace("~/SearchResults.aspx") to make it redirect to correct page but didn't work.

function doClick(buttonName, e) {
  //the purpose of this function is to allow the enter key to 
  //point to the correct button to click.
  var key;

  if (window.event) {
    key = window.event.keyCode;     //IE
  } else {
    key = e.which;                  //firefox
  }

  if (key == 13) {
    //Get the button the user wants to have clicked
    var btn = document.getElementById(buttonName);
    if (btn != null) { //If we find the button click it
       btn.click();
       event.keyCode = 0;
    }
  }
}
1

There are 1 best solutions below

0
sd4ksb On

Finally i got to make the search button to work on iPhones. It seems that after executing btn.click(), it is submitting the form twice and thus changing the action attribute to home page. By placing e.preventDefault() before the btn.click() event makes it to work properly. Also, I didn't mention that i got two submit buttons, the first submit button is for the desktop version, which is only hidden when the user is on mobile device. I totally removed the mark-up for the submit button (desktop) instead of just hiding it.

Hope this answer may help someone in the future.