Question

I’m struggling with having a login dialog box appear on login. What I need to happen is when the user logs in using the built in MVC3 authentication controls, I need it to pop up a dialog that spits out some terms and agreements, and says “if you hit accept, you agree to the above”. I currently have that, but when I hit cancel, the site will still log in anyway. Here is my code:

<fieldset>
    <legend>Login</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.userName)
        </div>
        <div class="focus">
            <div class="editor-field">
                @Html.EditorFor(model => model.userName)
            </div>
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.passWord)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.passWord)
        </div>

        <p>
            <input type="submit" value="Login" name="btnLogin" id="btnLogin" />
        </p>
        @Html.ValidationSummary(true)


</fieldset>

And the Javascript that I have:

    <script type="text/javascript">
        $(function () {
            $("#btnLogin").click(function () {
                var answer = confirm("Unauthorized access or use of the web content is prohibited.\n" + "By clicking 'OK', you have agreed to the above conditions");
                if (answer) {
                }
                else {
                    $(this).dialog("close");
                }
            });
        });
    </script>

How would I get it to just cancel the HttpPost on login when the user hits cancel on the dialog and continue to login if they hit ok?

Much appreciated!!

Answer 1

in your event handler add this

 $("#btnLogin").click(function (event) {
     var answer = confirm("Unauthorized access or use of the web content is prohibited.\n" + "By clicking 'OK', you have agreed to the above conditions");
     if (answer) {

     }
     else{
          $(this).dialog("close");
          event.preventDefault();
     }
 });

Adding the event.preventDefault(); you’re ensuring preveting the default behavior of the form