Div click and AUTOCOMPLETE password dialog problem

Question

And what if you want to autocomplete passwords? I am using similar thing here... I am using Div (id=loginButton) and it has some image - I don't want button control in MVC application (), neither image button. I have hidden input control which is hidden button actually (id=submit_btn).

So, on div's (id=loginButton) click, I want to call hidden input control (id=submit_btn) and it's submit action.

HTML:

<div id="loginButton" > </div>

<input type="submit" style="display:none" name="submit" id="submit_btn" />

And JQuery:

$(document).ready(function() {
 $('#loginButton').click(function() {
  $('#LoginForm').submit();
 });
 $("form[action$='HandleLoginForm']").submit(function() {
  Login();
   return false;
 });
 return false;
});

Function Login() is working with Ajax, without downloading file dialog, but I need also auto complete passwords dialog.

 function Login() {
  var urlData = $("#LoginForm").serialize();

    if (returnUrl != "") {
      urlData = $("#LoginForm").serialize() + "&returnUrl=" + returnUrl;
    }
  $.ajax({
  url: $("#LoginForm").attr("action"),
    type: "POST",
    data: urlData,
    dataType: "json",
    success: function(result) {
      if (result.Content != null) {
        if (result.Valid) {
          window.location = result.Content.toString();
        }
        else {
          document.body.innerHTML = result.Content.toString();
        }
      }
    }
  });
  return false;
}

It is easy when you use only

<input type="submit">

instead of DIV. Form knows that it is for auto completing passwords, but if I use div and force hidden button click like in the code from below, it doesn't show autocomplete password dialog.

 $('#submit_btn').click();

It will not work. User is logged in, but no reminding for browser to store password.

I need this.

Answer 1

Ok, I investigated a little bit, here is what is going on...

I am created a login page in MVC.

I should click on a Div and submit a form.

Div is there because I need image instead of image button or button, so I am setting background image for it.

Submit button is important because I want to submit login data: username and password.

When I click on a div, there should be a question by browser to save password. After that user should log in if data is valid.

The problem is to submit data and not to show dialog for opening MVC loging action as a file (Download File 'HandleLoginForm' - which is MVC action).

If I would use button there would be no problem, but I want to simulate form submit click by clicking on a div and everything I tried didn't worked.

If I use this, no password autocomplete dialog will occur.

  $(document).ready(function() {
  $('#loginButtonDiv').click(function() {
    $("form[action$='HandleLoginForm']").submit();
  });

  //$("form[action$='HandleLoginForm']") = $("#LoginForm")
  $("form[action$='HandleLoginForm']").submit(function() {
    Login();
    return false;
  });
  return false;
});

function Login() {
  var urlData = $("#LoginForm").serialize();

  if (returnUrl != "") {
    urlData = $("#LoginForm").serialize() + "&returnUrl=" + returnUrl;
  }
  $.ajax({
    url: $("#LoginForm").attr("action"),
    type: "POST",
    data: urlData,
    dataType: "json",
    success: function(result) {
      if (result.Content != null) {
        if (result.Valid) {
          window.location = result.Content.toString(); // redirection to some url
        }
        else {
          document.body.innerHTML = result.Content.toString(); // report a problem with login
        }
      }
    }
  });
  return false;
}

And if instead of mentioned $(document).ready(function() block I use code below, there will be autocomplete dialog and also a Download File dialog after login is successful.

 $(document).ready(function() {
  $('#submit_btn').click(function() {//input submit click
    Login();
  });
  $('#loginButton').click(function() {//div click
    $('#submit_btn').click(); // this is <input type="submit" id="submit_btn"/>
  });

  $("form[action$='HandleLoginForm']").submit(function() { // form submit event
    Login();
    return false;
  });
  return false;
});

OR, maybe you guys have some other idea how to show image which would be a submit button in MVC login page?

Answer 2

I finally found solution. If we want to submit form with AUTOCOMPLETE password, we can use image instead of button:

<input type="image" id="loginImg" src="../Images/loginImage.png"  
    class="loginButton" /> 

Browser will ask you to save password, we will use image instead of button and no Download File dialog will occur if we want to call action in controller like I did.

So, this would be final HTML code just in case someone needs it:

On submit form (with default 'HandleLoginForm' action) call javascript Login method:

$(document).ready(function() {
  $("form[action$='HandleLoginForm']").submit(function() {
    Login();
    return false;
  });
  return false;
});

Login method for login user using MVC controller action:

function Login() {
  var urlData = $("#LoginForm").serialize();

  if (returnUrl != "") {
    urlData = $("#LoginForm").serialize() + "&returnUrl=" + returnUrl;
  }
  $.ajax({
    url: $("#LoginForm").attr("action"),
    type: "POST",
    data: urlData,
    dataType: "json",
    success: function(result) {
      if (result.Content != null) {
        if (result.Valid) {
          window.location = result.Content.toString();
        }
        else {
          document.body.innerHTML = result.Content.toString();
        }
      }
    }
  });
  return false;
}

If we want to login with enter button, just trigger image.

function submitenter(myfield, e) {

var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  else return true;

  if (keycode == 13) {
    $("#loginImg").trigger();
    return false;
  }
  else
    return true;
}

And here are pieces of HTML code:

     <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
            <% Html.EnableClientValidation(); %><!-- MVC2 validation requires this -->
              <% using (Html.BeginForm("HandleLoginForm", "Login", FormMethod.Post,
                     new { id = "LoginForm" })) %>
              <% {
              %>

         <div class="divDisplayNone errorDiv"> <!-- div for errors  using MicrosoftMvcJQueryValidation.js-->
              <%=Extensions.DisplayLoginError("DivErrorsHeader", "DivErrorsContent", Model) %>
            </div>

        <div class="leftDiv">
                <label for="UserName">
                  <%=Resources.TextUsername%></label>
              </div>
              <div class="rightDiv">
                <%= Html.TextBoxFor(m => m.UserName, new { id = "txtUsername", @class = "inputField", tabIndex=1, AUTOCOMPLETE = "on", 
          onKeyPress = "return submitenter(this,event)" })%>
                <%= Html.ValidationMessageFor(m => m.UserName, "", new { @class = "redStar" })%>
              </div>

        <div class="leftDiv">
                <label for="password">
                  <%=Resources.TextPassword%></label>
              </div>
              <div class="rightDiv">
                <%= Html.PasswordFor(m => m.Password, new
        {
          id = "txtPassword", @class = "inputField", AUTOCOMPLETE = "on", tabIndex = 2,
          onKeyPress = "return submitenter(this,event)" })%>
                <%= Html.ValidationMessageFor(m => m.Password, "", new { @class = "redStar" })%>
              </div>
        <input type="image" id="loginImg" src="<%=Constants.ImageButtonNext %>"  
                class="loginButton" />


    <div class="rightDiv">
            <%= Html.CheckBoxFor(c => c.RememberMe, new { id = "chbRememberMe", tabIndex = 3,  onKeyPress = "return submitenter(this,event,'"+System.Web.HttpContext.Current.Request.Params["ReturnUrl"]+"')"  })%>
            <label class="inline" for="rememberMe">
              <%=Resources.TextRememberPassword %></label>
          </div>
<% } %>
</asp:Content>

Answer 3

Correction on SubmitEnter method - you have to define TYPE when trigger control.

$("#loginImg").trigger("submit");

And here is the whole JavaScript method:

function submitenter(myfield, e) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  else return true;

  if (keycode == 13) {
    $("#loginImg").trigger("submit");
    return false;
  }
  else
    return true;
}