No click event is executed

Question

No click event is executed

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

I am trying to send a form from an ASPX page to AJAX but it does not enter the event function click of the button in the JavaScript part, I have removed the runat="server" from the form but it generates an error; so I do not know what the error is.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btnEnviar").click(function (e) {
                    e.preventDefault();
                    $("#lblIncorrectos").html("Procesando...");
                    var data = {
                        "userid": $("#txtUsuario").val(),
                        "password": $("#txtPassword").val(),
                        "recordarme": $("#chkRecordar").val()
                    };
                    $.ajax({
                        type: "POST",
                        url: "Index.aspx/Login",
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: true,
                        success: function (result) {
                            $("#lblIncorrectos").text(result.d);
                        },
                        error: function () {
                            $("#lblIncorrectos").html("Error");
                        }
                    });
                });
            });
    </script>
</head>
<body>
        
<form id="form1" role="login" runat="server">
<span>
    <center><img src="img/logo_naranja.gif" class="img-responsive" width="250" height="200" /></center>
</span>
<h3>Nombre de la Empresa</h3>
<div class="form-group">
    <!--<asp:TextBox ID="txtUsuario" runat="server" placeholder="Ingrese su usuario" required class="form-control"></asp:TextBox>-->
    <input type="text" name="txtUsuario" placeholder="Ingrese su usuario" required class="form-control" />
    <span class="glyphicon glyphicon-user"></span>
</div>

<div class="form-group">
    <!--<asp:TextBox ID="txtPassword" runat="server" placeholder="Ingrese su contraseña" required class="form-control" TextMode="Password"></asp:TextBox>-->
    <input type="password" name="txtPassword" placeholder="Ingrese su contraseña" required class="form-control" />
    <span class="glyphicon glyphicon-lock"></span>
</div>

<div class="form-group">
    <!--<asp:CheckBox ID="chkRecordar" runat="server" value="1" />
                    Recordarme ?-->
	<input type="checkbox" id="chkRecordar" name="remember" value="1" /> Recordarme ?
</div>
<!--<asp:Button ID="btnEnviar" runat="server" Text="Entrar" class="btn btn-block btn-primary" />-->
<button type="submit" id="btnEnviar" class="btn btn-block btn-primary">Entrar</button>
</form>
<center><asp:Label ID="lblIncorrectos" runat="server" class="alert alert-danger" rol="alert"></asp:Label></center>           

 </body>
 </html>

html5 ajax vb.net

asked by Drago25 04.02.2016 в 17:28

source

3 answers

1

I think you have failed to include the jQuery library

Try adding this before the <script> current and below the <title></title> .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered by 04.02.2016 в 17:36

1

You could use the Developer Tools of browser (access this with F12) to inspect if there is an error in the javascript code.

Introduction to the F12 development tools

In the Console tab you can validate if an error in the client code prevents the event from running.

answered by 04.02.2016 в 17:46

Difference between ion-item and div class="item" ionic Edit edit with PDO

score 2 · Accepted Answer

You should define the button as Type="button". Or instead of the method being executed when clicking, it executes in the submit of form1

Change the Type:

<button type="button" id="btnEnviar" class="btn btn-block btn-primary">Entrar</button>'

Changing The Event

 <script type="text/javascript">
        $(document).ready(function () {
            $("#form1").submit(function (e) {
                e.preventDefault();
                $("#lblIncorrectos").html("Procesando...");
                var data = {
                    "userid": $("#txtUsuario").val(),
                    "password": $("#txtPassword").val(),
                    "recordarme": $("#chkRecordar").val()
                };
                $.ajax({
                    type: "POST",
                    url: "Index.aspx/Login",
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        $("#lblIncorrectos").text(result.d);
                    },
                    error: function () {
                        $("#lblIncorrectos").html("Error");
                    }
                });
            });
        });
</script>