i have this login page:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
</head>
<body>
<div id ="header_login"></div>
<div id ="fdm_intro"></div>
<div id="footer"></div>
</body>
</html>
and the fallowing header:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script type="text/javascript" src="login.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
PROBLEM: i cannot make an alert in login.js. it seems like my form does not call the javascript.... any help??
You forget to add the Jquery reference in your html page. Try this code.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
Login.js:
$(document).ready(function() {
alert();
});
Related
When ever I am clicking login button my html page is open again on other tab how can I fix this issue?
I have made a html form so when ever I click on login than html page is opening in new tab how to fix this problem
my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" href="style.css">
<script src="script2.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#emailjs/browser#3/dist/email.min.js"
></script>
</script>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="phone-app-demo"></div>
<div class="form-data">
<form id="myForm" action="" target="_blank">
<div class="logo">
<img src="./images/logo.png" alt="logo">
</div>
<input type="text" placeholder="Phone number, username, or email" id="email">
<input type="password" placeholder="Password" id="name">
<button class="form-btn" onclick="sendMail()">Log in</button>
<span class="has-separator">Or</span>
<a class="facebook-login" href="#">
<i class="fab fa-facebook-square"></i> Log in with Facebook
</a>
<a class="password-reset" href="#">Forgot password?</a>
</form>
<div class="sign-up">
Don't have an account? Sign up
</div>
<div class="get-the-app">
<span>Get the app.</span>
<div class="badges">
<img src="./images/app-store.png" alt="app-store badge">
<img src="./images/google-play.png" alt="google-play badge">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove the target="_blank" attribute from your form tag to avoid opening in another tab.
I want the animation to look similar to
what's shown in this Pinterest post.
I am unable to replicate as shown using the below starter script!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<p> file:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" name="filename">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
</div>
</body>
</html>
I want to display the datepicker in french and I included the cdn of the local
this is my code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js">
</script>
</head>
<body>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
and it gives me 2 errors
first error
second error
You need to declare the main datepicker too. Also I've added the missing datepicker class to the input and then the following snippet works.
$(function() {
$('.datepicker').datepicker({
language: 'fr'
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="input-group date" id="datepicker">
<!-- I've added the datepicker class, which you are using in your jQuery -->
<input type="text" class="form-control datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
you can try this library:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
</head>
<body>
<div class="gj-clear-both"></div>
<div class="gj-margin-top-10">
<input id="datepicker" width="276" />
</div>
<script type="text/javascript">
var datepicker, config;
config = {
locale: 'de-de',
uiLibrary: 'bootstrap4'
};
$(document).ready(function () {
datepicker = $('#datepicker').datepicker(config);
config.locale = 'fr-fr';
datepicker.destroy();
datepicker = $('#datepicker').datepicker(config);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
</head>
<body>
<div class="gj-margin-top-10">
<input id="datepicker" width="276" />
</div>
</body>
</html>
<!-- end snippet -->
I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks
My controller function is not called at all using Angular.js.I am explaining my code below.
admin.html:
<head ng-app="adminModule">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
<div class="login-sec">
<div class="login-sec">
<div class="login">
<div class="login-form">
<span><img src="images/logo.png" alt="" /></span>
<h5><strong>Identify</strong> Yourself</h5>
<center ng-hide="lStatus">{{loginStatus}}</center>
<form action="#" method="post">
<fieldset><input type="text" placeholder="Username" class="logininputdiv" /><i class="fa fa-user"></i></fieldset>
<fieldset><input type="password" placeholder="Password" class="logininputdiv" /><i class="fa fa-unlock-alt"></i></fieldset>
<label><input type="checkbox" />Remember me</label><button type="button" class="blue" ng-click="adminLogin();">LOG IN</button>
</form>
</div>
<span>Copyright © 2015 Odia Doctor</span>
</div>
</div><!-- Log in Sec -->
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/adminlogincontroller.js" type="text/javascript"></script>
</body>
</html>
adminlogincontroller.js:
var app = angular.module('adminModule',[]);
app.controller('admincontroller',['$scope','$http',function($scope,$http){
console.log('hello controller');
$scope.lStatus=false;
}])
I need here when page will be load this controller function will called.But nothing is happening like this.Please help me to resolve this issue.
It looks like you define your ng-app on <head> instead of <html>.
<head ng-app="adminModule">
So it result that your controller is not in the scope of angular :)
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
You should so declare it on <html>
<html ng-app="adminModule">
<head>
...
</head>
<body ng-controller="...">
</body>
</html>