<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--Panel-->
<div class="card text-center">
<div class="card-header default-color-dark white-text">
<h2 style="margin: 0;padding: 0;">Payment Information</h2>
</div>
<div class="card-block">
<table class="table">
<tr>
<td>
Payment Method <span class="req">*</span>
</td>
<td>
<select name="paymentmethodparent" id="paymentmethodparent" class="selectpicker form-control" data-live-search="true">
<option data-tokens="" value="">Select a Method</option>
<option data-tokens="bank" value="bankchooser">Bank</option>
<option data-tokens="bkash" value="bkashchooser">bKash</option>
<option data-tokens="rocket" value="rocketchooser">Rocket</option>
</select>
</td>
</tr>
<!--ALL BANK-->
<tr class="paymentmethod bankchooser">
<td>
Choose Bank <span class="req">*</span>
</td>
<td>
<select class="selectpicker form-control" data-live-search="true" style="display:none" id="bankparent">
<option data-tokens="" value="">Select A Bank</option>
<option data-tokens="dbbl" value="dbbloptions">DBBL</option>
<option data-tokens="brac" value="bracoptions">BRAC</option>
<option data-tokens="other" value="otheroptions">Other</option>
</select>
</td>
</tr>
<!--DBBL-->
<tr class="paymentmethod bankmethod dbbloptions">
<td>
Account Holder <span class="req">*</span>
</td>
<td>
<input type="text" name="dbbl_holder" id="dbbl_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod dbbloptions">
<td>
AC No <span class="req">*</span>
</td>
<td>
<input type="text" name="dbbl_no" id="dbbl_no" class="form-control" placeholder="DBBL AC No" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod dbbloptions">
<td>
Branch Name <span class="req">*</span>
</td>
<td>
<input type="text" name="dbbl_branch" id="dbbl_branch" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1">
</td>
</tr>
<!--/DBBL-->
<!--BRAC-->
<tr class="paymentmethod bankmethod bracoptions">
<td>
Account Holder <span class="req">*</span>
</td>
<td>
<input type="text" name="brack_holder" id="brac_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod bracoptions">
<td>
AC No <span class="req">*</span>
</td>
<td>
<input type="text" name="brac_no" id="brac_no" class="form-control" placeholder="Brac AC No" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod bracoptions">
<td>
Branch Name <span class="req">*</span>
</td>
<td>
<input type="text" name="brac_branch" id="brac_branch" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1">
</td>
</tr>
<!--/BRAC-->
<!--Other-->
<tr class="paymentmethod bankmethod otheroptions">
<td>
Bank Name <span class="req">*</span>
</td>
<td>
<input type="text" name="o_bank_name" id="o_bank_name" class="form-control" placeholder="Bank Name" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod otheroptions">
<td>
Account Holder <span class="req">*</span>
</td>
<td>
<input type="text" name="o_account_holder" id="o_account_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod otheroptions">
<td>
AC No <span class="req">*</span>
</td>
<td>
<input type="text" name="o_account_no" id="o_account_no" class="form-control" placeholder="AC No" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod otheroptions">
<td>
Branch Name <span class="req">*</span>
</td>
<td>
<input type="text" name="o_branch_name" id="o_branch_name" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1">
</td>
</tr>
<tr class="paymentmethod bankmethod otheroptions">
<td>
Routing No <span class="req">*</span>
</td>
<td>
<input type="text" name="o_rotuing_no" id="o_rotuing_no" class="form-control" placeholder="Routing No" aria-describedby="basic-addon1">
</td>
</tr>
<!--/Other-->
<!--/ALL BANK-->
<!--ALL Mobile-->
<!--Bkash-->
<tr class="paymentmethod bkashchooser">
<td>
bKash Type <span class="req">*</span>
</td>
<td>
<select class="selectpicker form-control" data-live-search="true" id="bkash_type">
<option data-tokens="agent" value="agent">Agent</option>
<option data-tokens="personal" value="personal">Personal</option>
</select>
</td>
</tr>
<tr class="paymentmethod bkashchooser">
<td>
Bkash No <span class="req">*</span>
</td>
<td>
<input type="text" name="bkash_no" id="bkash_no" class="form-control" placeholder="Bkash No" aria-describedby="basic-addon1">
</td>
</tr>
<!--/Bkash-->
<!--Rocket-->
<tr class="paymentmethod rocketchooser">
<td>
Rocekt Type <span class="req">*</span>
</td>
<td>
<select id="rocket_type" class="selectpicker form-control" data-live-search="true">
<option data-tokens="agent" value="agent">Agent</option>
<option data-tokens="personal" value="personal">Personal</option>
</select>
</td>
</tr>
<tr class="paymentmethod rocketchooser">
<td>
Rocket No <span class="req">*</span>
</td>
<td>
<input type="text" name="rocket_no" id="rocket_no" class="form-control" placeholder="Rocekt No" aria-describedby="basic-addon1">
</td>
</tr>
<!--/Rocket-->
<!--/ALL Mobile-->
</table>
</div>
</div>
<!--/.Panel-->
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-info pull-right" id="update" value="Submit" style="margin-top:20px;">
</div>
</div>
</div>
</body>
</html>
.center {
margin:0;
padding:0;
background:#eceeef;
text-align:center;
}
.custom {
border:1px solid darkblue;
border-radius:10px;
margin:0 2%;
padding:0;
}
.req {
color:red;
font-weight:bold;
}
.card {
position:relative;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
background-color:#fff;
border:1px solid grey;
border-radius:5px !important;
box-shadow:2px 5px 8px #80808080;
margin-top:10px;
}
.card-block {
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
}
.card-footer,.card-header {
padding:.75rem 1.25rem;
background:#;
color:#000;
}
.paymentmethod,.bankmethod {
display:none;
}
td {
text-align: left;
}
$(function() {
$('#paymentmethodparent').change(function(){
$('.paymentmethod').hide();
$('.' + $(this).val()).show();
});
});
$(function() {
$('#bankparent').change(function(){
$('.bankmethod').hide();
$('.' + $(this).val()).show();
});
});
$('#update').click(function(event) {
var paymentmethodparent = $('#paymentmethodparent').val();
//for banks dbbl and rocket
if (paymentmethodparent=='bankchooser')
{
var bankparent = $('#bankparent').val();
//for dbbl bank
if (bankparent=='dbbloptions')
{
var paymentmethod = 'bank';
var dbbl_holder = $('#dbbl_holder').val();
var dbbl_no = $('#dbbl_no').val();
var dbbl_branch = $('#dbbl_branch').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
bank_name:"dbbl",
dbbl_holder : dbbl_holder,
dbbl_no : dbbl_no,
dbbl_branch:dbbl_branch,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
}
});
}//for brac bank
if (bankparent=='bracoptions')
{
var paymentmethod = 'bank';
var brac_holder = $('#brac_holder').val();
var brac_no = $('#brac_no').val();
var brac_branch = $('#brac_branch').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
bank_name:"brac",
brac_holder : brac_holder,
brac_no : brac_no,
brac_branch:brac_branch,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
}
});
}//for other banks
if (bankparent=='otheroptions')
{
var paymentmethod = 'bank';
var other_bank_name = $('#o_bank_name').val();
var other_ac_holder = $('#o_account_holder').val();
var other_ac_no = $('#o_account_no').val();
var other_branch_name = $('#o_branch_name').val();
var other_routing_no = $('#o_rotuing_no').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
bank_name:'otherbank',
other_bank_name:other_bank_name,
bank_account_holder : other_ac_holder,
bank_account_no : other_ac_no,
branch_name:other_branch_name,
routing_no:other_routing_no,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
}
});
}
}//for bkash
if (paymentmethodparent=='bkashchooser')
{
var paymentmethod = 'bkash'
var bkash_type = $('#bkash_type').val();
var bkash_no = $('#bkash_no').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
bkash_type : bkash_type,
bkash_no : bkash_no,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
}
});
}//for rocket
if (paymentmethodparent=='rocketchooser')
{
var paymentmethod = 'rocket';
var rocket_type = $('#rocket_type').val();
var rocket_no = $('#rocket_no').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
rocket_type : rocket_type,
rocket_no : rocket_no,
"_token": "{{ csrf_token() }}"
},
success: function(data){
console.log(data)
}
});
}
});
