Develop Reference

popup window inside another popup window bootstrap

I have a two pages sign-in and sign-up in my navbar(header) angular2 project. In my sign-up page I have a link which should have to redirect to sign-in page when we clicked it. I am unable to process it.Can anyone guide me how to do it. thanks in advance
Here are the both codes i have tried with router aswell.
sign-in.component.html
<div class="modal-content" style="padding: 10px;" id="login">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="text" class="form-control" name="username" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
<hr>
</form>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password?
</p>
</div>
</div>
</div>
</div>
</div>
sign-up.component.html
<div class="modal-content" style="padding: 20px;">
<div class="modal-body text-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-body">
<form method="POST" action="#" role="form">
<div class="form-group">
<h2>Create account</h2>
<hr>
</div>
<div class="form-group">
<label class="control-label" for="signupName">Your name</label>
<input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label class="control-label" for="signupEmail">Email</label>
<input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signupPassword">Password</label>
<input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
</div>
<div class="form-group">
<label class="control-label" for="signupPasswordagain">Confirm Password</label>
<input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
</div>
<hr>
<p>Already have an account? Sign in</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
PS:- I should only do this in angular r javascriprt r bootstrap way thanks in advance
Edit :- Is there anyone can do this?

I solved my issue by adding in my signup component
<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">
<div *ngIf="show"> //at the bottom
<app-sign-in></app-sign-in>
</div>
adding a click function to the button
<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>
in the ts file making show = true and hide= false when required like below
export class SignUpComponent implements OnInit {
show = false;
hide = true;
signin(){
this.hide=false;
this.show=true;
}
}

Serialize data in AJax

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>

Form validation is not working in MEAN Stack using angular js and node js

Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>

Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>

Use a button instead a href to trigger div

I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?

you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href

Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>

Bootstrap validation states with file upload

I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>