Develop Reference

Add or remove input controls on the fly using jQuery,Bootstrap

I was going through the code given in this link, for adding input controls like textboxes, dropdown lists etc in my form.
but when i tried to modify, the code, with addition of new dropdownlists, am not getting the results properly. Alignment was wrong and label is not coming as expected.
here is my updated code
<div class="col-md-6">
<label> entity name </label>
</div>
<div class="col-md-4">
<label> Operator </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_1"
placeholder="Enter entity name." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select Field Name--</option>
<option>--state1--</option>
<option>--state2--</option>
<option>--state3--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select attribute --</option>
<option>--attributes1--</option>
<option>--attributes2--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option> --Select entity -- </option>
<option> entity1 </option>
<option> entity2 </option>
</select>
</div>
my requirement is to add 3 more dropdown lists and 2 checkboxes.
but when I tried to add the dropdown lists/ label titles , am getting those in a unexpected results.
form-with-dynamic-controls
in order to get the correctly aligned form controls - with proper titles, etc
where n which tags i need to modify?

I think you didn't add cdn's in your code. You can also take the code from here
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" class="form-control" >
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button class="btn_round add_node_btn_frm_field" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
///======Clone method
$(document).ready(function(){
$("body").on("click", ".add_node_btn_frm_field", function (e) {
var index = $(e.target).closest(".form_field_outer").find(".form_field_outer_row").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row").clone(true);
$(e.target).closest(".form_field_outer").last().append(cloned_el).find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
//change id
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("input[type='text']").attr("id", "mobileb_no_"+index);
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("select").attr("id", "no_type_"+index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function(){
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field", function () {
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});
.btn_round {
width: 35px;
height: 35px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 35px;
margin-left: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.btn_round:hover {
color: #fff;
background: #6b4acc;
border: 1px solid #6b4acc;
}
.btn_content_outer {
display: inline-block;
width: 85%;
}
.close_c_btn {
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 0;
line-height: 30px;
border-radius: 50%;
background: #ededed;
border: 1px solid #ccc;
color: #ff5c5c;
text-align: center;
cursor: pointer;
}
.add_icon {
padding: 10px;
border: 1px dashed #aaa;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.add_group_btn {
display: flex;
}
.add_group_btn i {
font-size: 32px;
display: inline-block;
margin-right: 10px;
}
.add_group_btn span {
margin-top: 8px;
}
.add_group_btn,
.clone_sub_task {
cursor: pointer;
}
.sub_task_append_area .custom_square {
cursor: move;
}
.del_btn_d {
display: inline-block;
position: absolute;
right: 20px;
border: 2px solid #ccc;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="static/css/AdminLTE.min.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<title>
Dynamically add or remove form input fields using jQuery -
bootstrapfriendly
</title>
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-12 form_sec_outer_task border">
<div class="row">
<div class="col-md-12 bg-light p-2 mb-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h4 class="frm_section_n">Form Title</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label>Mobile No.</label>
</div>
<div class="col-md-4">
<label> Type </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer">
<button
class="btn_round add_node_btn_frm_field"
title="Copy or clone this row"
>
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
</div>
</div>
</div>
<div class="row ml-0 bg-light mt-3 border py-3">
<div class="col-md-12">
<button class="btn btn-outline-lite py-0 add_new_frm_field_btn">
<i class="fas fa-plus add_icon"></i> Add New field row
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 pt-4"></div>
</div>
</div>
</body>
</html>

How to update the cart with ajax json response

I am adding items to cart with ajax request but i don't know how to update the cart with ajax response.
This is my index.blade.php code from where i am adding items to cart with some inputs in cart:
<form id="product-1">
#csrf
<div class="modal-body cart-addon" style="margin-top: 20px">
<div class="food-item white">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="item-img pull-left">
<a class="restaurant-logo pull-left" href="#"><img id="image"/> </a>
</div>
<div class="rest-descr">
<h6><input id="name" name="name" style="width: 200px; border: none; margin-top: 15px" readonly></h6>
</div>
</div>
<!-- end:col -->
<div class="col-xs-6 col-sm-2 col-lg-2 text-xs-center"> <span class="price pull-left">$<input id="price" name="price" style="width: 50px; border: none" readonly></span></div>
<div class="col-xs-6 col-sm-4 col-lg-4">
<div class="row no-gutter">
<div class="form-group">
<select class="form-control" id="quantity" name="quantity" required>
<option selected="selected" disabled="disabled" value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="spice" name="spice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Spice</option>
<option value="Mild" style="font-size: 14px">Mild</option>
<option value="Medium" style="font-size: 14px">Medium</option>
<option value="Hot" style="font-size: 14px">Hot</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="naan" name="naan" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Naan</option>
<option value="No Naan" style="font-size: 14px">No Naan</option>
<option value="Naan" style="font-size: 14px">Naan</option>
<option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
<option value="Roti" style="font-size: 14px">Roti</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="rice" name="rice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Lunch Rice</option>
<option value="No Rice" style="font-size: 14px">No Rice</option>
<option value="Rice" style="font-size: 14px">Rice</option>
</select>
</div>
<input class="form-control" name="instructions" id="instructions" placeholder="Instruction"/>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div class="col-md-3">
<input hidden name="products_id" id="products_id">
<button type="submit" class="btn theme-btn">Add to cart</button>
</div>
</div>
</div>
</form>
Ajax Request:
<script>
$("#product-1").submit(function (e){
e.preventDefault();
let quantity = $("#quantity").val();
let spice = $("#spice").val();
let naan = $("#naan").val();
let rice = $("#rice").val();
let instructions = $("#instructions").val();
let products_id = $("#products_id").val();
let _token = $("input[name=_token]").val();
$.ajax({
url: "{{route('product.addToCart')}}",
type: "get",
data:{
products_id:products_id,
quantity:quantity,
spice:spice,
naan:naan,
rice:rice,
instructions:instructions,
_token:_token
},
beforeSend: function() {
},
success:function(response)
{
$("#product-1")[0].reset();
$('#product-modal').modal('hide');
$('#product-modal').trigger("click");
}
})
});
and this is my controller:
public function getAddToCart(Request $request)
{
$products = Products::find($request->products_id);
$quantity = $request->input('quantity');
$instructions = $request->input('instructions');
$spice = $request->input('spice');
$naan = $request->input('naan');
$rice = $request->input('rice');
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
for ($i = 1; $i <= $quantity; $i++)
{
if ($naan == "Garlic Naan"){
$cart->garlic_add($products, $products->id, $instructions, $spice, $naan, $rice);
} else
$cart->add($products, $products->id, $instructions, $spice, $naan, $rice);
}
$request->session()->put('cart', $cart);
$oldCart = Session::get('cart');
$cart = new Cart($oldCart);
$request->session()->put('cart', $cart);
return back();
return redirect('/');
}
This is my blade part where i am showing cart.
#if(Session::has('cart'))
#foreach($carts as $product)
<div class="order-row bg-white">
<div class="widget-body">
<div class="title-row">{{ $product['item']['name'] }}
<form id="reduceProduct">
<input name="id" id="id" value="{{$product['item']['id']}}">
<button type="submit" style="background-color: transparent; border: 0;"><i class="fa fa-trash pull-right" style="color: #FF3300"></i></button>
</form>
</div>
<div class="title-row">{{ $product['instructions'] }}</div>
<div class="title-row">{{ $product['spice'] }}</div>
#if(!empty($product['rice']))
<div class="title-row">{{ $product['rice'] }}</div>
#endif
<div class="form-group row no-gutter">
<div class="col-xs-8">
<select class="form-control b-r-0" id="exampleSelect1">
<option>Size SM</option>
<option>Size LG</option>
<option>Size XL</option>
</select>
</div>
<div class="col-xs-4">
<input class="form-control" type="number" value="{{ $product['qty'] }}" id="example-number-input">
{{ $product['item']['price'] }}
{{ $product['price'] }}
</div>
</div>
</div>
</div>
#endforeach
<!-- end:Order row -->
<div class="widget-delivery clearfix">
<form>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio4" name="radio" type="radio" class="custom-control-input" checked=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery</span> </label>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Takeout</span> </label>
</div>
</form>
</div>
<div class="widget-body">
<div class="price-wrap text-xs-center">
<p>TOTAL</p>
<h3 class="value"><strong>$ 25,49</strong></h3>
<p>Free Shipping</p>
<button onclick="location.href='checkout.html'" type="button" class="btn theme-btn btn-lg">Checkout</button>
</div>
</div>
Can any help me with the code that how can i update the cart with ajax response.
ThankYou

Bootstrap Password Revealer Got Into Bug

A Bootstrap password revealer that makes my PC hang when I hover the eye button. It adds automatically an input even though there's no codes to add an input.
The input has automatically increase, it makes my bowser hang on and then my whole PC next.
What is the possible reason and solution for this? This causes my PC hang.
JSFIDDLE: https://jsfiddle.net/aice09/76b99w4m/
//Password Revealer
$(".reveal").mousedown(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
})
.mouseup(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
})
.mouseout(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
});
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.jshttps://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
<!-- // Modal -->

I would just set the type of the password input to text when you click on .reveal
//Password Revealer
$(".reveal").on('click',function() {
$('#em_password').attr('type','text');
})
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #2aabd2;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #eb9316;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #c12e2a;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>
<!-- Content Section -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Employee</h1>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="pull-right">
<button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
<div class="records_content"></div>
</div>
</div>
</div>
<!-- /Content Section -->
<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="em_position" id="em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="em_department" id="em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="update_em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="update_em_position" id="update_em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="update_em_department" id="update_em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
<input type="hidden" id="hidden_user_id">
</div>
</div>
</div>
</div>
Here's how I would do it with your original events.
//Password Revealer
$passwd = $('#em_password');
$(".reveal").mousedown(function() {
$passwd.attr('type', 'text');
})
.mouseup(function() {
$passwd.attr('type', 'password');
})
.mouseout(function() {
$passwd.attr('type', 'password');
});
.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #419641;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #2aabd2;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #eb9316;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #c12e2a;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>
<!-- Content Section -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Employee</h1>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="pull-right">
<button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
<div class="records_content"></div>
</div>
</div>
</div>
<!-- /Content Section -->
<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="em_position" id="em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="em_department" id="em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_firstname">First Name</label>
<input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_middlename">Middle Name</label>
<input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_lastname">Last Name</label>
<input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_id">System ID</label>
<input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-group">
<label for="em_email">Email</label>
<input type="text" id="update_em_email" placeholder="Email" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_position">Position</label>
<select name="update_em_position" id="update_em_position" class="form-control" required="required">
<option value="Position 1">Position 1</option>
<option value="Position 2">Position 2</option>
<option value="Position 3">Position 3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_department">Department</label>
<select name="update_em_department" id="update_em_department" class="form-control" required="required">
<option value="Department 1">Department 1</option>
<option value="Department 2">Department 2</option>
<option value="Department 3">Department 3</option>
<option value="Department 4">Department 4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
<input type="hidden" id="hidden_user_id">
</div>
</div>
</div>
</div>

Form field values are not getting passed into JSON object correctly

This is my JSFiddle : https://jsfiddle.net/inchrvndr/7pwh9p8g/
The bordered form elements get cloned on click of "+" button.
The values of all the cloned form elements are getting passed into JSON except for the parent whose clone is being made.
On clicking "Save" button, you can see the alert for JSON object of all form field values except for the first bordered div.
Why is this so? Please help.
Thanks :)

I have solved this issue.
Here is the answered fiddle : AnswerFiddle
I added the Join Operator into the same "to-be-cloned" div and hid its div before cloning.
It becomes visible after cloning, that is, after clicking on, "+" button.
Now, all of the before clone and after cloned form fields' values are getting passed into the JSON.

try this..
UPDATE:
you have duplicate elements, like this one: id="op" there can be only one ID unique on page.. I suggest that you drop id's or generate them
$( document ).ready(function() {
$('#deleteRow').closest('.form-group').hide();
$('#addRow').on('click', function (e) {
var len = $('.child-border').length;
$('.parent-border-repeat').clone().find(':input').each(function (idx, ele) {
ele.name = ele.name + len;
ele.id = ele.id + len;
ele.value = '';
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-border-repeat child-border').hide()
.appendTo('#container').slideDown('slow');
});
$('button.btn:contains("Save")').on('click', function (e) {
var jsonData = $('form.form-horizontal')
.find(':input:not(button)').get()
.reduce(function (acc, ele) {
acc[ele.id] = ele.value;
return acc;
}, {});
// console.log(jsonData);
alert(JSON.stringify(jsonData, null, 4));
});
$('#container').on('click', '[id^=deleteRow]', function(e) {
var jsonData = $(this).closest('.child-border, .parent-border-repeat')
.find(':input:not(button)').get()
.reduce(function (acc, ele) {
acc[ele.name || ele.id] = ele.value;
return acc;
}, {});
$(this).closest('.child-border, .parent-border-repeat').remove();
console.log(jsonData);
});
});
.navbar-nav li {
margin-top: 8px;
margin-bottom: 8px;
}
.tabs-container {
margin-top: 100px;
margin-bottom: 75px;
}
.parent-border-repeat{
display: none;
}
.parent-border, .child-border {
border: 1px solid #CCC;
border-radius: 4px;
padding: 15px;
margin-bottom: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row tabs-container">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
Rules
</li>
<li>
Events
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="nameRules">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameRules" name="nameRules" placeholder="Enter name"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="typeRules">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="typeRules" name="typeRules">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="descriptionRules">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ</textarea>
</div>
</div>
<div class="parent-border col-sm-offset-2 col-sm-10">
<div class="form-group">
<div class="col-sm-offset-10">
<button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="elhs">Expression LHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="elhss" name="elhs" placeholder="Enter LHS" name="lhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="op">Operator</label>
<div class="col-sm-10">
<select class="form-control" id="opp" name="op">
<option>
<=</option>
<option>>=</option>
<option>!==</option>
<option>
<</option>
<option>></option>
<option>==</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="erhss" name="erhs" placeholder="Enter RHS" name="rhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="datatype">Datatype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="datatypee" name="datatype" placeholder="Enter datatype" name="datatype"></div>
</div>
</div>
<div class="parent-border-repeat col-sm-offset-2 col-sm-10">
<div class="form-group">
<div class="col-sm-offset-10">
<button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="joinop">Join Operator</label>
<div class="col-sm-10">
<select class="form-control" id="joinopp">
<option>&&</option>
<option>||</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="elhs">Expression LHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="elhs" name="elhs" placeholder="Enter LHS" name="lhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="op">Operator</label>
<div class="col-sm-10">
<select class="form-control" id="opp" name="op">
<option>
<=</option>
<option>>=</option>
<option>!==</option>
<option>
<</option>
<option>></option>
<option>==</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="erhs" name="erhs" placeholder="Enter RHS" name="rhs"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="datatype">Datatype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="datatype" name="datatype" placeholder="Enter datatype" name="datatype"></div>
</div>
</div>
<div id="container"></div>
<div class="form-group">
<div class="col-sm-offset-6">
<button type="button" id="addRow" class="btn btn-success btn-circle btn-lg">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="tab2default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="nameEvents">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameEvents" name="nameEvents" placeholder="Enter name"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="typeRules">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="typeRules" name="typeRules">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="descriptionEvents">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-footer pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Save</button>
</li>
</ul>
</div>
</div>
</div>
</div>

How to hide one Bootstrap's modal when other appears on screen?

I have two modal menus on the same page: for registration and for login. When appears first, second should be disappeared from the page and not overlap the first one. How could I do this using bootstrap or bootstrap & jQuery?
The first menu:
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
The second one:
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with our Terms&Conditions
</div>
</form>
</div>
</div>
</div>
</div>
Update:
I wrote a jQuery snippet for this but it stopped working correctly (has no reaction on clicking).
URL links:
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
Login
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
Sign up
</div>
</div>
jQuery code:
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
Seems that the code is correct. Why it doesn't work?

$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
However you need to write a bit o javascript for it to work properly but it basically goes down to this methods.