locked
MessageBox with input and validation. RRS feed

  • Question

  • User944339287 posted

    Hi guys.. i wanna pop up a message box and request user input for the second authentication.

    The below code is working. but how do i make it better?
    1) Change user input to *******
    2) RequiredField Validator. 

    TQ

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function getPassword() {
            var pwd = prompt('Please enter your password:', '');
    
            if (pwd != null) {
                if (pwd != '') {
                    document.getElementById('hf_password').value = pwd;
                    return true;
                }
            }
    
            return false;
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Button ID="btn_submit" runat="server" Text="Confirm" OnClientClick="return getPassword()"/>
            <asp:HiddenField ID="hf_password" Value="" runat="server" />    
        </div>
        </form>
    </body>
    </html>
        Protected Sub btn_submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_submit.Click
            //Do something for authentication// Me.hf_password.Value
        End Sub




    Tuesday, May 18, 2021 3:49 AM

All replies

  • User-1545767719 posted

    MessageBox with input and validation.

    What do you mean by “MessageBox”? Is it the MessageBox class in the System.Windows.Forms namespace? If yes your application will never work when it is hosted by IIS. I suggest that you use the ModalPopupEntender of Ajax Control Toolkit if a use of popup like the MassageBox is must.

    Tuesday, May 18, 2021 5:29 AM
  • User1535942433 posted

    Hi kengkit,

    There's no way to set password and validation in the confirm.I suggest you could use jQuery MsgBox plugin. Or you could use dialog,Bootstrap Modal.

    Just like this:

    $("#advancedexample1").click(function() {
      $.msgbox("<p>In order to process your request you must provide the following:</p>", {
        type    : "prompt",
        inputs  : [
          {type: "text",     label: "Insert your Name:", value: "George", required: true},
          {type: "password", label: "Insert your Password:", required: true}
        ],
        buttons : [
          {type: "submit", value: "OK"},
          {type: "cancel", value: "Exit"}
        ]
      }, function(name, password) {
        if (name) {
          $.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
        } else {
          $.msgbox("Bye!", {type: "info"});
        }
      });
    });

    More details,you could refer to below articles:

    http://s3.envato.com/files/293712/index.html

    https://api.jqueryui.com/dialog/

    https://getbootstrap.com/docs/4.0/components/modal/

    Best regards,

    Yijing Sun

    Wednesday, May 19, 2021 2:00 AM
  • User944339287 posted

    Hi yij sun, can you pls look into my code below. i trying to "do something" with the submitted data but failed.
    * the button doesn't trigger if i put <form runat="server">

    Thanks for your time...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" type="text/css" href="http://s3.envato.com/files/293712/css/reset.css" />
        <link rel="stylesheet" type="text/css" href="http://s3.envato.com/files/293712/css/global.css" />
        <script type="text/javascript" src="http://s3.envato.com/files/293712/javascript/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://s3.envato.com/files/293712/javascript/msgbox/jquery.msgbox.css" />
        <script type="text/javascript" src="http://s3.envato.com/files/293712/javascript/msgbox/jquery.msgbox.min.js"></script>
    </head>
    <body>
    <form runat="server">
            <button id="advancedexample1" type="submit" onserverclick="btn_submit_Click">Click Me</button>
            <asp:HiddenField ID="hf_name" runat="server" Value="" />
            <asp:HiddenField ID="hf_password" runat="server" Value="" />
            <script type="text/javascript">
                $("#advancedexample1").click(function () {
                    $.msgbox("<p>In order to process your request you must provide the following:</p>", {
                        type: "prompt",
                        inputs: [
                  { type: "text", label: "Insert your Name:", value: "George", required: true },
                  { type: "password", label: "Insert your Password:", required: true }
                ],
                        buttons: [
                  { type: "submit", value: "OK" },
                  { type: "cancel", value: "Exit" }
                ]
                    }, function (name, password) {
                        if (name != null && password != null) {
                            document.getElementById('hf_name').value = name;    
                            document.getElementById('hf_password').value = password;                        
                        } else {
                            $.msgbox("Bye!", { type: "info" });
                        }
                    });
                });
            </script>
    </form>
    </body>
    </html>

    Code Behind

        Protected Sub btn_submit_Click(ByVal sender As Object, ByVal e As EventArgs)
    
            'do something with the submitted username and password.
            Response.Write(Me.hf_name.Value & " " & Me.hf_password.Value)
    
        End Sub




    Thursday, May 27, 2021 3:02 AM
  • User1535942433 posted

    Hi kengkit,

    Currently, this code is not maintained. Alternatives such as bootstrap are recommended.

    See modals for modals in bootstrap.

    Best regards,

    Yijing Sun

    Thursday, May 27, 2021 6:10 AM