How to avoid input value copying on click of button - javascript

Everything works fine but it also copies the value inside input button e.g if i write 1st in the input, 1st will also be copied on click of the button, does anyone has any resolution ?
$(function(){
$(".btn-copy").on('click', function(){
var ele = $(this).closest('.example-2').clone(true);
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Related

Not getting dynamically added input text's post value in jquery and laravel

Code of jquery:-
$(".add-education").on('click', function () {
var educationcontent = '<div class="row form-row education-cont">' +
'<div class="col-12 col-md-10 col-lg-11">' +
'<div class="row form-row">' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>Degree</label>' +
'<input type="text" class="form-control" name="degree1">' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>College/Institute</label>' +
'<input type="text" class="form-control" name="clg1">' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>Year of Completion</label>' +
'<input type="text" class="form-control" name="yoc1">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-2 col-lg-1"><label class="d-md-block d-sm-none d-none"> </label><i class="far fa-trash-alt"></i></div>' +
'</div>';
// edu++;
$(".education-info").append(educationcontent);
return false;
});
Here i am not getting output of dynamically added textbox's input in post method of form,
in the image the 2nd line or divison is added textbox dynamically
code of controller for laravel post method
public function drprofilesettingpost(Request $request){
dd($request->all());
}
The output gives only null value for the dynamically added textbox
The php blade template here
#include('doctor.navbar')
<!-- Breadcrumb -->
<div class="breadcrumb-bar">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<nav aria-label="breadcrumb" class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Profile Settings</li>
</ol>
</nav>
<h2 class="breadcrumb-title">Profile Settings</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-lg-8 col-xl-9">
<!-- Basic Information -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Information</h4>
<div class="row form-row">
<div class="col-md-12">
<div class="form-group">
<div class="change-avatar">
<div class="profile-img">
<img src="{{url('/')}}/assets/img/doctors/doctor-thumb-02.jpg" alt="User Image">
</div>
<form method="post" action="{{url('/')}}/doctor/profilesetting">
#csrf
<div class="upload-img">
<div class="change-photo-btn">
<span><i class="fa fa-upload"></i> Upload Photo</span>
<input type="file" class="upload">
</div>
<small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Username <span class="text-danger">*</span></label>
<label class="form-control">{{$userinfo->username;}}</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email <span class="text-danger">*</span></label>
<label class="form-control">{{$userinfo->email;}}</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>First Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" value="{{$userinfo->firstname;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" value="{{$userinfo->lastname;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone Number</label><span class="text-danger">*</span>
<input type="text" class="form-control" value="{{$userinfo->phoneno;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Gender</label><span class="text-danger">*</span>
<select class="form-control select">
<option>Select</option>
<option
#if($userinfo->gender == 'M')
selected='selected'
#endif
>Male</option>
<option
#if($userinfo->gender == 'F')
selected='selected'
#endif
>Female</option>
<option
#if($userinfo->gender == 'O')
selected='selected'
#endif
>Other</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-0">
<label>Date of Birth</label><span class="text-danger">*</span>
<input type="text" class="form-control" value="{{$userinfo->dob}}">
</div>
</div>
</div>
</div>
</div>
<!-- /Basic Information -->
<!-- About Me -->
<div class="card">
<div class="card-body">
<h4 class="card-title">About Me</h4>
<div class="form-group mb-0">
<label>Biography</label>
<textarea class="form-control" rows="5">{{$userinfo->biography}}</textarea>
</div>
</div>
</div>
<!-- /About Me -->
<!-- Clinic Info -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Clinic Info</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>Clinic Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Clinic Address</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Clinic Images</label>
{{-- <form action="#" class="dropzone"></form> --}}
</div>
<div class="upload-wrap">
<div class="upload-images">
<img src="{{url('/')}}/assets/img/features/feature-01.jpg" alt="Upload Image">
<i class="far fa-trash-alt"></i>
</div>
<div class="upload-images">
<img src="{{url('/')}}/assets/img/features/feature-02.jpg" alt="Upload Image">
<i class="far fa-trash-alt"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Clinic Info -->
<!-- Contact Details -->
<div class="card contact-card">
<div class="card-body">
<h4 class="card-title">Contact Details</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>Address Line 1</label>
<input type="text" class="form-control" value="{{$userinfo->address1}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Address Line 2</label>
<input type="text" class="form-control" value="{{$userinfo->address2}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" value="{{$userinfo->city}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">State / Province</label>
<input type="text" class="form-control" value="{{$userinfo->state}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Country</label>
<input type="text" class="form-control" value="{{$userinfo->country}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Postal Code</label>
<input type="text" class="form-control" value="{{$userinfo->pincode}}">
</div>
</div>
</div>
</div>
</div>
<!-- /Contact Details -->
<!-- Pricing -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Pricing</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>GENERAL CONSTANT PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->generel_cons_price}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">VIDEO-CALL PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->videocallprice}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">VOICE-CALL PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->voicecallprice}}">
</div>
</div>
</div>
</div>
<!-- /Pricing -->
<!-- Services and Specialization -->
<div class="card services-card">
<div class="card-body">
<h4 class="card-title">Services and Specialization</h4>
<div class="form-group">
<label>Services</label>
{{-- <input type="text" data-role="tagsinput" class="input-tags form-control" placeholder="Enter Services" name="services" value="HI" id="services"> --}}
<input type="text" data-role="tagsinput" class="input-tags form-control" placeholder="Enter Services" name="services" value="{{$userinfo->services}}" id="services">
<small class="form-text text-muted">Note : Type & Press enter to add new services</small>
</div>
<div class="form-group mb-0">
<label>Specialization </label>
<input class="input-tags form-control" type="text" data-role="tagsinput" placeholder="Enter Specialization" name="specialist" value="{{$userinfo->specialization}}" id="specialist">
<small class="form-text text-muted">Note : Type & Press enter to add new specialization</small>
</div>
</div>
</div>
<!-- /Services and Specialization -->
<!-- Education -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Education</h4>
<div class="education-info">
<div class="row form-row education-cont">
<div class="col-12 col-md-10 col-lg-11">
<div class="row form-row">
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Degree</label>
<input type="text" class="form-control" name="degree">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>College/Institute</label>
<input type="text" class="form-control" name="clg">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Year of Completion</label>
<input type="text" class="form-control" name="yoc">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Education -->
<!-- Experience -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Experience</h4>
<div class="experience-info">
<div class="row form-row experience-cont">
<div class="col-12 col-md-10 col-lg-11">
<div class="row form-row">
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Hospital Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>From</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>To</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Experience -->
<!-- Awards -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Awards</h4>
<div class="awards-info">
<div class="row form-row awards-cont">
<div class="col-12 col-md-5">
<div class="form-group">
<label>Awards</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-5">
<div class="form-group">
<label>Year</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Awards -->
<!-- Memberships -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Memberships</h4>
<div class="membership-info">
<div class="row form-row membership-cont">
<div class="col-12 col-md-10 col-lg-5">
<div class="form-group">
<label>Memberships</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Memberships -->
<!-- Registrations -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Registrations</h4>
<div class="registrations-info">
<div class="row form-row reg-cont">
<div class="col-12 col-md-5">
<div class="form-group">
<label>Registrations</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-5">
<div class="form-group">
<label>Year</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Registrations -->
<div class="submit-section submit-btn-bottom">
<button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /Page Content -->
</div>
<script src="{{url('/')}}/assets/js/jquery.min.js"></script>
<script src="{{url('/')}}/assets/js/popper.min.js"></script>
<script src="{{url('/')}}/assets/js/bootstrap.min.js"></script>
<script src="{{url('/')}}/assets/plugins/theia-sticky-sidebar/ResizeSensor.js"></script>
<script src="{{url('/')}}/assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js"></script>
<script src="{{url('/')}}/assets/plugins/select2/js/select2.min.js"></script>
<script src="{{url('/')}}/assets/plugins/dropzone/dropzone.min.js"></script>
<script src="{{url('/')}}/assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.js"></script>
<script src="{{url('/')}}/assets/js/profile-settings.js"></script>
<script src="{{url('/')}}/assets/js/script.js"></script>
</body>
</html>
Your form submit was not sending all the data because your form tags were not correctly placed in the HTML content, and therefore you were confusing the browser of which elements to include in the form submit.
Move your opening form tag before this line <div class="col-md-7 col-lg-8 col-xl-9">.

modal show event is not firing

I have one view in asp.net MVC application, in which i have one table. on each row i have one anchor tag which will open modal window. I have written some code on modal show event. but the event is not firing. my view's layout is coming from custom layout page.following is the code for my view.
#Model
#Imports System.Data
#Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
#Section js
<script src="#Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
#section css
End Section
<script src="#Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="#Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="#Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="#Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="#Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">#ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">#Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">#Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">#Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
#If Session("Lang") = "E" Then
#:<div Class="col-md-2 pr-0">
Else
#:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">#Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">#Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
#If Session("Lang") = "E" Then
#:<div Class="col-md-12 text-right">
Else
#:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
#Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
#If ViewBag.RowCount > 0 Then
#:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
#:<thead class="thead-light">
#:<th>#Session("tdcontainerno")</th>
#:<th>#Session("tdbolnumber")</th>
#:<th>#Session("tdarrivaldate")</th>
#:<th>#Session("tdrecvddate")</th>
#:<th>#Session("tdsku")</th>
#:<th>#Session("tdagent")</th>
#:<th>#Session("tdlot")</th>
#:<th>#Session("tdstatus")</th>
#:<th></th>
#:</thead>
#:<tbody>
#For Each row As System.Data.DataRow In Model.Rows
#:<tr>
For Each cell In row.ItemArray
#:<td>#cell.ToString</td>
Next
#:<td><i class="fa fa-file-text-o"></i></td>
#:</tr>
Next
#:</tbody>
#:</table>
End If
</div>
</div>
following is the HTML code for modal
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>#Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
following is the JavaScript for event firing for modal show
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>
Try activating the modal via javascript using class instead of data-target.
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});

Order HTML divs to their corresponding div with JavaScript

In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>

onclick with same class

I have Div1 and Div2 inside this divs i have multiple inputs.
The goal is when i click on div 1 btn edit it shows the inputs inside div 1 and the same to div2
My html
My 1º Div
<div class="col-lg-6 col-md-6 xxx">
<div class="row form-group ">
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 1</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My 2º div
<div class="row form-group " >
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 2</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My jquery code:
$("body").on("click", ".xxx",function(){
$(this).parent().find(".edit_xxx").toggle();
});
The final goal is when click inside .xxx it opens the input id click again closes the input from DIV1 the same if click on div2
Thanks for the help, i realy suck with jquery.
The answer!
$("body").on("click", "#edit",function(){
$(this).parents(".xxx").children("#edit_xxx").toggle();
});

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories