I am trying to send a form from an ASPX page to AJAX but it does not enter the click
button event function in the JavaScript part, I have removed the runat="server"
from the form but it generates an error; So I don't 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>
You should define the button as Type="button". Or instead of the method being executed on click, let it be executed on the submit of form1
Change Type:
changing the event
I think you have missed including the jQuery library
Try adding this before the
<script>
current and below the<title></title>
.You could use the Developer Tools of the
browser
(accessed with F12) to inspect if there is an error in the javascript code.Introduction to the F12 development tools
In the tab
Console
you will be able to validate if any error in the client code prevents the event from being executed.