HTML/Javascript/Bootstrap cannot hide button when clicked - javascript

So I have this code, I am trying to make the login/register buttons to hide the buttons once clicked, they instead flash (hide and quickly come back).
I am new to web development in general so I may be doing something stupid
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--CSS-->
<link rel="stylesheet" href="Login.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="jumbotron">
<!--Login/Register Tabs-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
<li><a data-toggle="tab" href="#registerTab">Register</a></li>
</ul>
<!--Tabs Content-->
<div class="tab-content">
<div id="loginTab" class="tab-pane active">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="loginUsernameText" type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="loginPasswordText" type="password" class="form-control" placeholder="Password">
</div>
<button id="loginButton" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div id="registerTab" class="tab-pane fade">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="registerUsernameText" type="text" class="form-control" placeholder="Username (3-24 Char)">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="registerPasswordText" type="password" class="form-control" placeholder="Password (3-24 Char)">
</div>
<button id="registerButton" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
</div>
<!--Scripts-->
<script src="Login.js" type="text/javascript"></script>
</body>
</html>
Login.js written with jquery
$('#loginButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
$('#registerButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
Any help is appreciated
SOLVED: settings attribute type="button" for the buttons saved my life, thanks for help!


try the following :
1) Add type="button" attributes to your buttons, might save you from some cases where buttons in form act as submits unless stated as of type=button.
2) Rewrite to the following
var registerButton = $('#registerButton');
var loginButton= $('#loginButton');
function hideButtons(){
registerButton.hide(); // or add your custom class here
loginButton.hide(); // or add your custom class here
return false; // avoid bubling
}
loginButton.on('click',function () {
hideButtons();
});
registerButton.on('click',function () {
hideButtons();
});
Tell me if it worked

Related

How to prevent jquery submit button from refreshing the HTML page?

I have a login page where the user enters his username and password, when he submits this form the data is sent to php file for verifying the password.
For the first time when the user enters data (I entered wrong details) the page shows "Invalid password...please try again".
The second time when the user enters data (again I enter wrong details) the page just reloads. I am not able to understand why this is happening.
For more better understanding I have added a google drive link to a video showing the issue.
Link:Link to the video
The html code:
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png">
RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>
The javascript part:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'php_admin_login.php',
data: {
admin_username: admin_username,
admin_password: admin_password
},
type: "POST",
dataType: "json",
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
}
else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
}
});
});
});
I'm sure there is no problem with the php code so I'm not pasting here just to make the question more clearer.
If you need the whole code of the project you can get it here:Github link to the project

else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';
Adding to an element’s .innerHTML replaces the whole content of the element; even the stuff that was already there will first be removed, and then re-created.
So your form itself is replaced with a new form, and therefor you completely lose your submit event handler you had attached to it as well.
Your attempts at preventing the default event action fail, because you handler function simply doesn’t get called any more at all, and just a normal form submit is performed now, which of course reloads the page.
You need to either add your event handler again after you replaced the parent container’s innerHTML - or use event delegation to begin with.

Try to use this. Hope it will help
$("form").submit(function(e){
e.preventDefault();
});
Kindly let me know if it does not work.

Try return false at the end of your $("#admin-signin").submit function instead of the preventDefault()

This is happening due to how you handle errors. By using document.getElementById('admin-signin-card').innerHTML += ... you are effectively reloading your form meaning that you lose the event listener. You can either adjust how you display the error or adjust the event listener.
I would recommend changing how you display the error.
I have removed the request in the example below but it's the same idea:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
let response = "no";
if (response === "OK") {
window.open("admin.html", "_self");
} else {
document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png"> RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;">
<div class="row padding">
<div class="card border-dark">
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group">
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
<div id="admin-signin-card-error"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</html>

like #CBroe mentioned, the problem is caused by innerHTML.
i moved the content of innerHTML to the form, and give it display none, when there an error i show the error with .show()
i changed the ajax url and data Type for testing purpose.
$(document).ready(function () {
$("#admin-signin").on('submit', function (event) {
event.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json',
type: "POST",
dataType: "jsonp",
data: {
admin_username: admin_username,
admin_password: admin_password
},
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
} else {
$('.alert.alert-danger').show();
console.log("error shown");
}
}
});
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
<div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>
</html>

When php form submission, submit button disable

And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.
I try jQuery click event but it is stopped the form submission.
myHTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>xxx</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead">
<div class="inner">
<!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
<nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">xxx</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sifirla.php">Sıfırla</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="guncelle.php">Güncelle</a>
</li>
</ul>
</nav>
</div>
</header>
<div><img src="image/xxx.png" alt="xxx" style="width: 150px;height: 150px;"></div>
<div>
<?php echo $result; ?>
</div>
<main role="main" class="inner cover">
<form id="form1" name ="form1" method="POST" action="guncelle.php" >
<div class="form-group">
<label for="uname">Kullanıcı Adınız:</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<span id="unametxt" name="unametxt" class="required"></span>
<div class="form-group">
<label for="password">Mevcut Şifreniz:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<span id="passwordtxt" name="passwordtxt" class="required"></span>
<div class="form-group">
<label for="newPassword">Yeni Şifreniz:</label>
<input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
</div>
<span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>
<div class="form-group">
<label for="new2Password">Yeni Şifreniz Tekrar:</label>
<input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
</div>
<span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>
<!--<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
</div>
-->
<p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle" ></p>
</form>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>#2018 xxxx</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When this form submitted , I controlled php side like this:
if (isset($_POST['Submit1'])) {
and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.
I want to disable the button when form submitting. How can I this?

You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below
<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">

Try with this code
<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">
<script>
$(document).ready(function(){
$('#form1').on('submit',function(e){
e.preventDefault();
$('#submit1').prop('disabled','disabled');
});
});
</script>

colorpicker inside jquery repeater not work when add new row

I'm using a third party plugin for the color picker compatible with bootstrap, this picker field added in a repeater so I can add rows and remove as I can
I initiate the plugin like the following
$('.color-picker').minicolors();
$(".mt-repeater").repeater();
but the color picker field not work for the added rows, it only works for the first row.
check the demo on codepen try to click on add row button then on the color picker https://codepen.io/anon/pen/ZexeYj
how can I deal with this issue? when I try to call the minicolors again after adding new row something went wrong.

but the color picker field not work for the added rows, it only works for the first row.
That happens because the color picker is partially initialized on next rows....
According to jquery.repeater documentation you must handle the show option callback:
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show(); // or $(this).slideDown();
}
});
In this method you can destroy the current minicolors and initialize a new one.
Working snippet:
$('.color-picker').minicolors();
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show();
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>
Another approach is setting initEmpty option to true:
start with an empty list of repeaters. Set your first (and only)
"data-repeater-item" with style="display:none;" and pass the
following configuration flag
The snippet:
$(".mt-repeater").repeater({
initEmpty: true,
show: function () {
$(this).find('.color-picker').minicolors();
$(this).slideDown();
}
});
// create the first group
$('[data-repeater-create]').trigger('click');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item" style="display:none;">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>

Buttons on any page inherited from Master firing. Not sure whats stopping it

Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing

First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.

Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">

ng-include Javascript not being executed

I'm in a refactoring mood, so I've moved all my login controller stuff out of Autenticate.html and into HTML templates. It was all working before the move but now the Javascript I am using is not being called. I have Javascript like this:
login.js
$(function () {
$("#userNameInput").keypress(function (e) {
if (e.keyCode === 13) $("#passwordInput").focus();
});
$("#passwordInput").keypress(function (e) {
if (e.keyCode === 13) $("#loginButton").click();
});
});
Authenticate.html
<!DOCTYPE html>
<html ng-app="iBOSModule">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /><base href="/">
<title>Welcome to iBOS</title>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/promise-tracker.js"></script>
<script src="/Scripts/angular-busy.min.js"></script>
<script src="/Scripts/http-interceptor.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="/Scripts/angular-animate.min.js"></script>
<script src="/Scripts/dirPagination.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/angular/components/login/scripts/login.js"></script>
<script src="/angular/components/shared/scripts/app.js"></script>
<script src="/angular/components/login/controllers/login.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/acs.css" rel="stylesheet"/>
</head>
<body style="background-image: url(/Content/Images/Jet-Above-The-Clouds.jpg);" ng-cloak>
<div class="container body-content top-buffer">
<ng-include src="'/angular/components/login/templates/login-template.html'"></ng-include>
</div>
</body>
</html>
login-template.html
<div class="well center-block" style="max-width: 489px;" ng-controller="LoginCtrl">
<div class="container">
<div class="row">
<img src="/Content/Images/ibos_logo.png" class="img-responsive" />
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFailed()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Invalid credentials. Please try again.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFault()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
An error occurred.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="userName" type="text" class="form-control" placeholder="User Name" ng-disabled="isAuthenticating()" id="userNameInput" tabindex="0">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="password" type="password" class="form-control" placeholder="Password" ng-disabled="isAuthenticating()" id="passwordInput" tabindex="1">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<button id="loginButton" class="btn btn-default pull-right" ng-hide="isAuthenticating()" ng-click="authenticate()" tabindex="2">Login</button>
<button id="loadingButton" class="btn btn-default pull-right disabled" ng-show="isAuthenticating()"><img src="/Content/Images/ajax-loader.gif" /></button>
</div>
</div>
</div>
The problem is that the Javascript is not being called when the key press events are fired. The actual bindings are happening - I checked in F12 and the binding function is being called.
Nothing else has changed. Why are the functions not being called?

Categories

Resources