Div click and AUTOCOMPLETE password dialog problem

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.

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>

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;
}