Convert ASP.Net Button to HTML Button with events

chetan

SOLVED CLOSED ACTIVE ANSWERED
User: chetan
Posted: on Oct 01, 2018 11:50 PM
Forum: ASP.Net Web Forms
Answer: 2
Views: 9575

I have the below line of asp code:

<asp:Button ID="btnLogin" CssClass="btn btn-success" Text="Login" OnClientClick="return FunForLoginValidation()" runat="server" OnClick="btnLogin_Click"/>

i wanted to write the same by using <input type>

i tried the following:

<input class="grey-button" type="submit" name="commit" value="Sign In" OnClientClick="return FunForLoginValidation()" runat="server" onserverclick="btnLogin_Click">

Is it a correct way to write this?

how to write asp:button into htmls input type

pandeyis...

0 1

Reply
ANSWER
User: pandeyism
Replied: on Oct 01, 2018 11:52 PM
Modified: on Oct 01, 2018 11:52 PM
Report

Hi chetan,

Please refer below sample code.

HTML

<div>
    <input type="submit" name="btnLogin" runat="server" value="Login" onclick="return FunForLoginValidation();"
            id="btnLogin" class="btn btn-success" onserverclick="btnLogin_Click" />
</div>
<script type="text/javascript">
    function FunForLoginValidation() {
    }
</script>

Code

protected void btnLogin_Click(object sender, EventArgs e)
{

}

chetan

0 2

Reply
User: chetan
Replied: on Oct 02, 2018 01:00 AM
Report

hi sir..

when i am clicking on login button,it is not calling function FunForLoginValidation.

chetan

0 3

Reply
User: chetan
Replied: on Oct 02, 2018 01:13 AM
Report

Below is my code:

<div class="header-login-form">
<a href="javascript:void(0)" class="header-login-button fa fa-facebook"></a>
<div class="header-login-main">
<span class="form-title"><span class="icon-user"></span>Join DubaiExporters!</span>
<div class="login-form">
<span class="login-form-title">Sign In</span>
    <asp:Label ID="lblErrUserName" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label> 
     <asp:Label ID="lblErrPassword" CssClass="help-block" runat="server" Text="" ForeColor="White"></asp:Label>  
<form id="login" action="login" method="post">
<div class="header-form-input"><span class="input-error username-error icon-attention-1"></span>
    <input class="loginusername" type="text" id="username" name="login" placeholder="Username" runat="server"></div>
<div class="header-form-input"><span class="input-error password-error icon-attention-1"></span>
    <input class="loginpassword" type="password" id="userpass" name="password" placeholder="Password" runat="server"></div>
<div class="login-forgot-password">
<span class="rememberme_checkbox"></span>
<a id="rememberme_check" href="javascript:void(0)">Remember me</a>
<input type="hidden" id="rememberme" name="rememberme" value="0">
<a href="forgotuserpass.aspx">Forgot password?</a>
</div>
<div class="header-form-input submit"><input type="hidden" id="security" name="security" value="96013c0ac1" /><input type="hidden" name="_wp_http_referer" value="/demo/sky/sky-directory/" />
    <input class="grey-button" type="submit" name="commit" value="Sign In" onclick="return FunForLoginValidation();" runat="server" onserverclick="btnLogin_Click"></div>
</form>
</div>

<div class="clearfix"></div>
</div>
</div>

<head>
...
...
 <asp:ContentPlaceHolder id="head" runat="server">
          <script>  
           function FunForLoginValidation() {  
               var objValid = true;  
               var objUserName = $("[id$=username]").val();
               var objPassword = $("[id$=userpass]").val();
               if (objUserName == "") {  
                   $('[id$=lblErrUserName]').text("User Name is required");  
                   $('[id$=lblErrUserName]').css("color", "#FF0000");  
                   $("[id$=username]").addClass("Error-control");
                   objValid = false;  
               }  
               else {  
                   $('[id$=lblErrUserName]').text("");  
                   $('[id$=lblErrUserName]').css("color", "#FFFFFF");  
                   $("[id$=username]").removeClass("Error-control");
               }  
      
               if (objPassword == "") {  
                   $('[id$=lblErrPassword]').text("Password is required");  
                   $('[id$=lblErrPassword]').css("color", "#FF0000");  
                   $("[id$=userpass]").addClass("Error-control");
                   objValid = false;  
               }  
               else {  
                   $('[id$=lblErrPassword]').text("");  
                   $('[id$=lblErrPassword]').css("color", "#FFFFFF");  
                   $("[id$=userpass]").removeClass("Error-control");
               }  
               return objValid;  
           }  
           function AcceptAlphanumeric(evt) {  
               var key = evt.keyCode;  
               return ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 95 && key <= 122));  
           }  
           function NotAllowSingleDoubleQuotes(e) {  
               var charCode = e.keyCode;  
               if (charCode == 34)  
                   return false;  
               if (charCode == 39)  
                   return false;  
           }  
       </script>  
    </asp:ContentPlaceHolder>
</head>

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Oct 02, 2018 05:05 AM
Report

Hi chetan,

Place the JavaScript function above the head ContentPlaceHolder in the master page or place in the head Content of Content page.

Convert ASP.Net Button to HTML Button with events

Company

Explore

Follow us

Contact Us