When a user goes to a page that requires them to register, I want to display a Bootstrap modal dialog with id and password. When the user presses the submit button, I want to:
Validate the password and sign them up
Dismiss the dialog
Take them to another page to display some information
What happens currently is when the user presses the Submit button. I go through the validation and try to hide the Bootstrap modal dialog, but then the page re-displays and the dialog comes back. This happens over and over again.
Here is the jsfiddle
Here is the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
<style>
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
</style>
<title>Immedia Home</title>
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div
class="modal fade"
id="signupModal"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your
account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<form id="signup-form" onsubmit="submitHandler()">
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
autocomplete="username"
class="form-control"
id="email"
aria-describedby="emailHelp"
required
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button
id="submit-button"
type="submit"
class="btn btn-primary"
>
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
<!-- JavaScript -->
<script>
// Function definitions
//
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function() {
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal(hide);
// They signed up successfully. Send them to the next page (for example only)
window.location.href = "https://www.duckduckgo.com";
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
</script>
</body>
</html>
You are clicking on a submit button inside a form. This will trigger a form submit where it attempts to redirect the submit request. since you have not specified any action and method attributes on the form tag, the browser does not know where to redirect the form submit request and you see a blank page.
In your code you have specified an action listener using js on the submit button. The code inside the listener will execute and after this the default action i.e. the form submit will execute. To prevent this add e.preventDefault() and the form submit event is not executed.
Below code works. You will get a blank page with console error Refused to display 'https://duckduckgo.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'" while running the code in jsfiddle or stackoverflow snippet. This shows the page redirect happened correctly and will work in your application. SO and JSFiddle doesnt like to display other websites within its code snippets.
$("#signupModal").on("hidden.bs.modal", function() {
$("body").removeClass("signupModal");
});
// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function(e) {
// ************Add below code to prevent defauilt submit button form submit **********
e.preventDefault();
const email = $("#email").val();
const password = $("#pwd-field").val();
console.info("email: " + email + ', password: "' + password + '"');
if (true) {
// Do not check for valid password. Assume it is for now.
console.info("valid password: ", password);
try {
// Signup user here
console.info("submitHandler(): successfully signed up");
$("#signupModal").modal('hide');
// They signed up successfully. Send them to the next page (for example only)
// ************ Change code to replace so that register page is removed from browser history on redirect **********
window.location.replace("https://www.duckduckgo.com");
} catch (err) {
console.error("Error signing up: ", err);
}
} else {
// invalid password
$("#pwd-field").val("");
}
console.info("submitHandler(): exiting function");
});
// Begin page execution
function onloadHandler() {
console.info("onloadHandler()");
$("body").addClass("#signupModal");
$("#signupModal").modal("toggle");
}
html,
body {
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* color: #212529; */
/* color: #bccee0; */
color: #bccee0;
}
.big-text-on-bg-img {
width: 75%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#media (min-width: 450px) {
.container-xs {
max-width: 500px;
}
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="viewport" content="width=device-width" />
<title>Immedia Signup</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<!-- Immedia stylsheet overrides -->
<!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
</head>
<body onload="onloadHandler()">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h1 class="masthead-brand">Modal Test Page</h1>
</div>
</header>
</div>
<!-- cover-container -->
<!-- Modal -->
<div class="modal fade" id="signupModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signup-title">
Thanks for entering an email address and password to protect your account.
</h5>
</div>
<!-- modal-header -->
<div class="modal-body">
<!-- ************ Remove form submit code ***********-->
<form id="signup-form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" autocomplete="username" class="form-control" id="email" aria-describedby="emailHelp" required />
<small id="emailHelp" class="form-text text-muted">We'll never spam you or share your email.</small
>
</div>
<!-- form-group -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
autocomplete="new-password"
class="form-control"
id="pwd-field"
aria-describedby="passwordHelp"
required
/>
<small id="passwordHelp" class="form-text text-muted">
Passwords must have at least 8 characters with one uppercase
one lowercase, one digit and one special character
"!##$%&*()"
</small>
</div>
<!-- form-group -->
<div class="form-group">
<button id="submit-button" type="submit" class="btn btn-primary">
Submit
</button>
</div>
<!-- form-group -->
</form>
</div>
<!-- modal-body -->
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
<!-- modal fade-->
</body>
</html>
Related
enter image description here
Upper image is the Sign-in page.
I added sweetalert, and it goes wrong like below.
(the alert set in the middel, and my sign-in form goes up! It should be located in the middle!)
(I added the alert appear when the ID or password value is null or empty.)
login equals sign-in
what's wrong with my code?
Here is my full code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.101.0">
<title>Floating labels example · Bootstrap v4.6</title>
<!-- Bootstrap core CSS -->
<!-- <link href="/css/bootstrap.min.css" rel="stylesheet">-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/product/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="/css/floating-labels.css" rel="stylesheet">
</head>
<body>
<div class="form-signin" style="max-width: 520px">
<div class="text-center mb-4">
<!-- TODO 로그인페이지 로고 추가할 자리 -->
<!-- <img class="mb-4" src="/brand/bootstrap-solid.svg" alt="" width="72" height="72">-->
<h1 class="h3 mb-3 font-weight-normal">로그인 </h1>
</div>
<div class="form-label-group">
<input id="user_id" class="form-control" placeholder="id" required autofocus>
<label for="inputId">ID를 입력하세요</label>
</div>
<div class="form-label-group">
<input type="password" id="password" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password를 입력하세요</label>
</div>
<div>
<button class="btn btn-outline-primary form-control" id="loginBtn" onclick="login()">로그인</button>
</div>
<hr class="mb-4">
<div class="btn-group row" style="width:100%; --bs-gutter-x: 0">
<button class="btn btn-sm btn btn-outline-secondary btn-block col-4" type="button" style="font-size:16px;">아이디
찾기
</button>
<button class="btn btn-sm btn btn-outline-secondary btn-block col-4" type="button" style="font-size:16px;">비밀번호
찾기
</button>
<button class="btn btn-sm btn btn-outline-secondary btn-block col-4" type="button" style="font-size:16px;"
onclick="joinBtn()">회원가입
</button>
</div>
<p class="mt-5 mb-3 text-muted text-center">© 2017-2022</p>
</div>
</body>
</html>
<script>
var input = document.getElementById("password");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("loginBtn").click();
}
});
var passwordForm = document.querySelector("#password");
function login() {
let userIdValue = document.querySelector("#user_id").value;
let passwordValue = document.querySelector("#password").value;
if (userIdValue == null || userIdValue == "") {
document.querySelector("#user_id").focus();
Swal.fire(
'ID가 비었습니다!',
'로그인 할 계정의 ID를 입력해주세요!',
'question'
)
return;
}
if (passwordValue == null || passwordValue == "") {
document.querySelector("#password").focus();
Swal.fire(
'비밀번호가 비었습니다!',
'로그인 할 계정의 비밀번호를 입력해주세요!',
'question'
)
return;
}
let info = {
userId: userIdValue,
password: passwordValue
}
$.ajax({
url: "/login/check/api",
method: "POST",
contentType: "application/Json",
data: JSON.stringify(info),
success: function (a) {
location.href = "/"
},
error: function (a, b) {
let errorA = a
Swal.fire({
icon: 'error',
title: '로그인 실패',
text: errorA.responseText,
})
//alert(a.responseText);
}
})
}
function joinBtn() {
location.href = "/join/form"
}
</script>
let me know how can I solve this problem
Before the alert comes out, I think the HTML should be on the screen first to solve the problem, but I don't know what to do.
NETWORK TABWith the code I have I want the console log to pass 6983839 to the console but it stays empty the whole time and the page refreshes. The endpoint of the API is here. The function is executed by a button press which I'm 99% sure isnt the issue as it works when a change the function to do something else and I have jQuery in my folder for the project aswell and linked in the html file. The code is my JS file is below,
function showCard() {
var cardName = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g,'');
$.getJSON("https://db.ygoprodeck.com/api/v7/cardinfo.php?name=Tornado%20Dragon", null, function(info){
var result = info["data"][0]["id"]
console.log(result)
})
}
Also including the HTML code incase its relevant
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<style>
.title{
color: white;
}
.cardSearch{
text-color: white;
}
#searchBox{
margin-right: 20px;
}
#chosenCard{
width: 177px;
height: 254px;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="header-img" class="container-fluid">
<div class="card card-body bg-dark">
<div class="rows">
<div class="col-ms-8">
<img src="yugioh.png" class = "img-responsive mx-auto d-block"/>
</div>
<div class="col-ms-4 text-center">
<h4 class="title">Combo Builder</h4>
<div id="searchBox">
<form id="cardSearch">
<input type="text" size="12" id="un" />
<input type="submit" onclick="showCard();" value="Submit Card"/>
</form>
<img id="chosenCard" scr="cardBack.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a form, when textbox is focused (onfocus), it triggers a marquee tag (in this case 'name') from left of textbox using javascript. But after the modal is opened, the marquee tag disappears and when the text field is focused again(onfocus), the marquee text does not come to display.
NOTE - marquee functionality for my code only worked for Mozilla firefox. So please try the code in firefox.
Steps -
Click the text box.
'Name' flows out using marquee.
Click 'Open modal'.
'Name' disappears (as soon as modal opens).
Close the modal.
Click the text box again, the marquee text doesn't trigger.
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#vpass{
display:none;
}
</style>
<script>
function anim(field) {
document.getElementById(field).style.display = "block";
}
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
Thank you
Please notice that <marquee> is an obsolete HTML5 element and its usage has been discouraged by W3C Standards:
The <marquee> element is a non-standard element. HTML5 classifies it as a non-conforming feature.
The reason that you shouldn't use <marquee> its because you can't assure support by the browsers. This advice is also encouraged by Can I Use.
You'd better animate your text with CSS3 animations or JavaScript. This question has some good sources about how you can emulate <marquee> behaviour.
I refactored the code a bit to use CSS transitions instead, as they provide better performance. That way, the moving label is no longer affected by the modal window, at all. Take a look at the updated snippet below:
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
td {
position: relative;
}
#vpass {
position: relative;
left: 100%;
transition: left 0.8s ease-in-out;
}
#vpass.active {
left: 0%;
}
</style>
<script>
function anim(field) {
document.getElementById(field).className = "active";
}
$(document).ready(function() {
$('#name').on('blur', function() {
$('#vpass').removeClass('active');
});
});
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass">name</label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
I also added functionality to deactivate the element class on blur. Let me know if you have any questions!
Try replacing the following anim function with the existing function
function anim(field) {
document.getElementById(field).style.display = "none";
$('#vpass').html('<marquee behavior="slide" direction="left" scrollamount="10">name</marquee>').show();
}
If this solution helps, don't forget to accept this answer
I want to display an alert after the submit button has been pressed and everything was done successfully. I am using the
jqBootstrapValidation.js
library to validate that the form is not being sent without values. This is the code that I have right now:
<!DOCTYPE html>
<br/>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Email address</label>
<div class="controls">
<input type="email" required />
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">Type something</label>
<div class="controls">
<input type="text" name="some_field" required />
<p class="help-block"></p>
</div>
</div>
<input type="submit" value="submit"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- or use local jquery -->
<script src="/js/jqBootstrapValidation.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
});
</script>
<div class="container">
<h2>Alerts</h2>
<p>Form Successful</p>
<div class="alert alert-success fade in">
×
<strong>Success!</strong> You have filled in the form correctly!
</div>
</div>
</body>
</html>
I want this to appear at the top left-hand corner and then redirect me to another page after 2 seconds or so (for now to the same page) after the validation was successful. Is this possible?
<div class="container">
<h2>Alerts</h2>
<p>Form Successful</p>
<div class="alert alert-success fade in">
×
<strong>Success!</strong> You have filled in the form correctly!
</div>
</div>
There is a submitSuccess: function ($form, event) will triggered when the form is validated successfully..you can used the alert inside this function ..
In the below code i have used div to display alert message..
$("input,textarea").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function ($form, event, errors) {
// something to have when submit produces an error ?
// Not decided if I need it yet
},
submitSuccess: function ($form, event) {
debugger;
event.preventDefault();
$('#divid').append('<h2>Alerts</h2> <p>Form Successful</p> <div class="alert alert-success fadein">
×
<strong>Success!</strong> You have filled in the form correctly!
</div> ');
});
Read the documentation there is a submitSuccess callback that is fired when the form is successfully validated and submitted.
You can reposition your alert container to the top left hand by adding some styling and hide it by default or better use bootstrap modals :) Try this
<div class="container alert-wrapper">
.... // add alert dialog here
</div>
.alert-wrapper {
position: absolute;
top: 0;
left: 0;
z-index:999;
background: #fff;
display: none;
height: 100%;
width: 100%;
overflow:hidden;
}
$(function () {
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation({
preventSubmit: true,
submitError: function ($form, event, errors) {
// Here handle errors
},
submitSuccess: function ($form, event) {
// Show your Success Message
$(".alert-wrapper").fadeIn();
// redirect after two seconds to other page
window.setTimeout(function () {
window.location.href = "https://www.example.com";
}, 2000);
event.preventDefault();
}
});
});
So, I am working angular project using yeoman angular-generator. I have a.png. I want this image to be the background for login page only. after I click the submit button then it will redirect to #/about.html and using body class as fullscreen background style. How can I do that?
Here’s my css:
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
Here’s my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/dashboard.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<!-- endbuild -->
</head>
<body ng-app="loginApp" class="body2">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ng-view=“"></div>
Here’s my view/main.html:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" style="background:#edf1f4;">
<div class="x_content"><br>
<center>
<br><br>
<div class="col-md-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12 form-group has-feedback">
<input type="password" class="form-control has-feedback-left"
id="inputSuccess2" placeholder="Password">
<span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12">
<a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
</div>
<div class="col-md-12 form-group has-feedback"> <br/>
<h32><strong>Forgot your password?</strong></h32>
<div class="divider"></div>
<h32>Not on PowerCube? <strong>Get started here.</strong></h32>
</div>
</center>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
Here’s my view/about.html:
<p>This is the about view.</p>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
Add css at the end of view/main.html.
<style>
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
</style>
This style will effect to view/main.html.
Well first you would want to correct your css. 'body2' isn't a tag.
I'm not entirely sure where you want that 'body2' css class to appear, but deciding what class to apply based on the route you are on (this is pb what you want to do) can be done with controller logic:
main.controller('MainCtrl', function($scope, $location) {
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active";
} else {
return "";
}
}
});
Html code :
<ul class="nav nav-pills">
<li ng-class="getClass('/main')">Phone List
</li>
<li ng-class="getClass('/module1')">Phone details
</li>
<li ng-class="">Module 2
</li>
</ul>
Here is the wrking plunker code
http://plnkr.co/edit/16iOyo6dz5RBNI91AD28?p=preview
Do it with ng-style (or ng-class), add a controller to check when you are in login page or not and use a scope variable to change the style, example:
<div class="row" ng-controller="MainController>
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" ng-style="loginBackground">
MainController:
$scope.loginBackground = null;
If (islogin) {
$scope.loginBackground = "background:#edf1f4;"
}
Use the following css to set background image to the largest div of the routed homepage. It might be easier to simply include it in the HTML rather than separating it. Once other pages are loaded, the background-image will return to the default.
#bigDiv {
background-image: url("paper.gif");
background-color: #cccccc;
}
I encounter this issue yesterday and turn out with this solution, not so smart but it's working.
+ Assign each page with custom directive: changebg
+ Name the body in index.html with a id (#example)
+ Now hook up angular body and change background style.
angular.module('app').directive('changebg',function(){
return{
restrict:'C',
controller:'changebgctrl'
}
}).controller('changebgctrl',changebgctrl);
changebgctrl.$inject =['$location','$scope'];
function changebgctrl($location,$scope){
angular.element("#example").removeClass(); // remove any class exist
angular.element("#example").addClass("whitebody");
}
You can give directive a data if you want to use this directive multiple time across pages, or try modify .css() if you don't want .addClass()