We Keep Coding

How to show/hide a model in form?

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model

Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Angular 2 - Unable to display rows of data in tabular column format

I am new to Angular. I am trying to display rows of data in a tabular column format. But each field in a row is displayed as row. I want each field in a row to be displayed next to each other as different columns in a single row. Below is my HTML code:
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>

This looks like a bootstrap issue. Try wrapping your col-md-3 divs in a row.
<div class="row">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
In this codepen, you can visualize it: https://codepen.io/capozzic1/pen/rrYzaV

Change from col-md-3 to col-xs-3 or col-sm-3. I'm guessing your viewport is larger than md, so it falls back to full width.
Try running the snippet below
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>

I suggest, use Angular Flex for arranging your <div>s as per your requirement. Its pretty simple once your know how to use Angular Flex(refer).

I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>

Just added BS cdn and copied your code. Everything looks fine and i see all the fields, did you include CDN as required??
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name" placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

parsley.js not working in laravel

I am trying to use parsley.js to validate the user input in client validation but no matter what I tried it doesn't work and have already taken these steps below.
Have downloaded parsley.js from http://parsleyjs.org/dist/parsley.min.js
Then add the path to the script like this: (This is added to the master.blade.php which all other pages extend).
After which I add data-parsley-validate to the form that I want to be validated. And this is the form and how I did it.
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">AJAX Register</div>
<div class="panel-body">
<form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
{!! csrf_field() !!}
<div class="form-group">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" id="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" id="email" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
<i class="fa fa-btn fa-user"></i> Register
</button>
<a href="{!! asset('login/facebook') !!}">
<div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection

If you are using jQuery wrap your parsley code in:
$(document).ready(function(){
// your code here
})
Also post your script code with parsley.

Not trigger form validation on button click

I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>