Show modal after validate form with onsubmit - javascript

I have a modal, in this modal I have a form, when I fill this form and I do click in send, automatically show another modal saying "Thank you", but, if I let the form empty and I do send, the form show "You need to fill this field" and above show the modal saying "Thank you" too... the conclusion is,
I want that first validate the form and after if all its filled show the modal saying "Thank you", bootstrap have the onsubmit option, ¿can I use this for validate the modal whit javascript? or what its the better way of validate a form?
<div class="modal fullscreen-modal fade fondo-gris modal-cotizador" id="...-...-..." tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="max-height">
<div class="modal-dialog max-height">
<div class="modal-content" style="background-color: #f6f5f3">
<div class="modal-...-...">
<div>
<h1 class="centrar tit-producto-rel-..."><br>
</h1>
</div>
</div>
<div class="modal-body ancho-modal" style="">
<form id="form-cotizacion-..." method="POST">
<div id="lista">
<!-- Aquí irá la lista -->
</div>
<h5>...:</h5>
<p>...</p>
<div class="centrar"><h4 class="centrar">...</h4>
<select id="hola" class="centrar" type="text" name="selecciona-familia" style="width: 50%">
<i class="fa fa-chevron-down"></i>
<option>...</option>
</select>
</div>
{% csrf_token%}
<input type="hidden" name="origen" value="{{request.path}}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="modelo" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="serie" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="nombre" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="apellidos" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""> <b> .... </b> </option><br>
<option value="...">... </option>
<option value="..."> <b> ..</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""><b>...</b></option><br>
<option value="..."> <b> ...</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="email" name="..." placeholder="..#....com" required><br>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lada-...-cot-...">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="..." placeholder="...">
<input type="text" name="..." placeholder="0000 0000" required>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>...</label><br>
<textarea style="border: 1px solid black" rows="7" name="..." placeholder="..."></textarea>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 term-cond-modal">
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<input type="submit" class="fondo-verde botton-cotizar" value="..." data-toggle="modal" data-target="#exampleModalCenter" style="border:none;"></input>
<input id="close-modal" type="hidden" class="btn btn-default" data-dismiss="modal">
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-inside-cotizar all-ref" id="exampleModalCenter" data-keyboard="false" role="dialog" aria-labelledby="exampleModalCenterTitle" tabindex="2" aria-hidden="true" data-backdrop="static" style="padding-top: 130px">
<div class="modal-dialog modal-dialog-centered" role="document" >
<div class="modal-content ...-cotizacion-modal ">
<div class="modal-header" style="border-bottom-width: 0px!important">
<button type="button" class="close close-modal-ref" data-dismiss="modal" style="position: absolute;top: 3%;padding-top: 5%;right: 5%;color: black;opacity: 1;background-size: contain;background-repeat: no-repeat;width: 24px;height: 30px; background-image: url('-...');"></button>
</div>
<div class="modal-body" style="text-align: center;">
<img src="..." style="width: 19%;margin-bottom: 10px;">
<h3>.......</h3>
<div style="padding-left: 7%;padding-right: 7%;margin: 20px 0px 20px 0px">
<h6>....</h6>
</div>
<h5>...</h5>
<label>...</label>
<h5>... ...</h5>
<label class="icon-redes-refa" style="border:0px">
<a href="..." target="_blank">
<span class="...-..."></span>
</a>
<a href="https://.../." target="_blank">
<span class=".-.."></span>
</a>
<a href="h..." target="_blank">
<span class=".-...."></span>
</a>
<a href="https://www...../.../" target="_blank">
<span class=".-..."></span>
</a>
<a href="https://www...com/.../..." target="_blank">
<span class=".-...."></span>
</a>
</label>
</div>
<div class="modal-footer" style="border-top-width: 0px!important">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#exampleModalCenter button').on('click', function() {
$('.modal').modal('hide');
});
});
</script>
The code,

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");
});

Bootstrap stacking inputs on div resize

I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.
I would like the inputs inside the form to stack side by side as I make the modal wider.
Html :
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
<div class="form-group col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
<div class="form-group col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
<div class="form-group col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle : https://jsfiddle.net/p204kwjz/6/
Can I make the inputs continue to stack horizontally as I enlarge the containing div?
The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.
The context here is that the forms will be created dynamically, so I need some kind of smart layouting.
If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Here is a fiddle.
The form-group and the col-auto classes aren't playing nicely. You can achieve fluid inputs by nesting col-auto inside form-group
fiddle
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group">
<div class="col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</div>
</form>
</div>
</div>
You are using bootstrap 4.
In bootstrap 4, if you code for medium, say 2 divs of col-md-6 and use in smaller screen, div takes the full width and stacking happens, ie: both the divs are one above the other.
div {
display: flex;
margin: 0px;
padding 0px;
}
.col-md-6 {
/* Assuming that col-md-6 width is 1000px */
width: 1000px;
}
<div>
<div class="col-md-6" style="background-color:red;">
Sri harsha
</div>
<div class="col-md-6" style="background-color:blue;">
Achyuthuni
</div>
</div>
That is because, unlike Bootstrap 3, Bootstrap 4 is made using flex boxes.
To see how flex works, look into this link
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Javascript - How to pass data from table into select options in modal?

Sorry for my bad english before. I have already pass data to a modal bootstrap. and already have successed passing data to an input in modal. but i dont know how to pass into a select option in modal.
how to do that? and displaying in select option with data.
Thanks in advance
here some of my code:
Get data from table:
<a href="javascript:;"
data-id="<?php echo $s1['sub_menuid']?>"
data-mainid="<?php echo $s1['main_menuid']?>"
data-nama="<?php echo $s1['nama_submenu']?>"
data-link="<?php echo $s1['link']?>"
data-icon="<?php echo $s1['icon']?>"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
passing into modal via javascript
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find('#main_menuid').attr("value",div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
modal-edit:
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value=""></option>
<?php foreach($main_menu as $mm) { ?>
<option value="<?php echo $mm['main_menuid']?>"><?php echo ucwords($mm['nama_mainmenu'])?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>
<!-- END Modal edit -->
use
modal.find("#main_menuid").val(div.data('mainid'));
here's a sample.
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find("#main_menuid").val(div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<a href="javascript:;"
data-id="1"
data-mainid="3"
data-nama="abcd"
data-link="abcd"
data-icon="abcd"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>click me
</a>
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value="1">val1</option>
<option value="2">val2</option>
<option value="3">val3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>

getElementById is not working for the div which is inside of tabset

this is my html
<div>
<h1 class="main-header logic-head av-settings-head"></h1>
<div class="col-xs-12 col-xs-12 col-lg-12 tabcontent" >
<form class="form-horizontal formtext col-xs-12 col-sm-10 col-lg-10 row">
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Name</label>
</div>
<div class="col-sm-5">
<input id="NewobjectName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Description</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<textarea id="objectDescription" rows="3" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Type</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<select class="form-control">
<option>M</option>
<option>C</option>
<option>CM</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">IsActive</label>
</div>
<div class="col-sm-5">
<input type="checkbox" checked="true" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">
</label>
</div>
<div class="clearfix"></div>
<!-- Groups Area Tables Start -->
<div class="row">
<div role="tabpanel" class="tab_bg">
<!-- Nav tabs -->
<div tabset justified="true" ng-if="clientScript.specification=='commonSpecific'">
<div tab heading="ClientScript">
<div class="tab-content pad25 users-area">
<div role="tabpanel" class="tab-pane mart15 active" id="objectPermissions">
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Javascript Type</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<select class="form-control" ng-change="onEventChange(script.event)" ng-options="obj.eventName as obj.label for obj in events"
ng-model="script.event">
<option value="">-select event-</option>
</select>
</div>
</div>
<div class="method-tab" id="method-tab">
<div class="row form-group btnbg">
<div class=" col-xs-12 col-sm-6 col-lg-12">
<button class="btn btn-primary pull-right">ADD +</button>
<div class="clearfix"></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12 well pad0">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs method-right">
<li class="active"><i></i>Script 1</li>
<li class=""><i></i><a data-toggle="tab" href="#group-2">Script 2</a></li>
<li class=""><i></i>Script 3</li>
<li class=""><i></i>Script 4</li>
</ul>
<div class="tab-content content-left">
<div class="tab-pane col-xs-12 col-sm-8 col-lg-12 pad0 marl19 active" id="name">
<div class="col-lg-12">
<h4>Javascript Editor</h4>
</div>
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body min-height">
<div id="editor">
function foo(items) {
var i;
for (i = 0; i < items.length; i++) {
alert("Ace Rocks " + items[i]);
}
}
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="row form-group btnbg">
<div class=" col-xs-12 col-sm-6 col-lg-12">
<button class="btn btn-primary pull-right">SAVE</button>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<button id="saveObject" class="btn btn-primary" ng-click="save()">
Validate
</button>
</div>
</div>
<div tab heading="SQL">
</div>
<div tab heading="HTML">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-lg-7 btnbg">
<button id="saveObject" class="btn btn-primary " ng-click="save()">
SAVE
</button>
</div>
</div>
</form>
</div>
and i am finding the element by id which is inside of tabset and that id name is "editor" but it is giving null
and my .js code is
var element=document.getElementById("editor");
the div with id "editor" is inside of tabset so i think that would be reason why it couldn't find it...so what would be the alternate method to handle this?
your code is working properly
var element = document.getElementById("editor");
snippet.log(element)
snippet.log(element.innerHTML)
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div>
<h1 class="main-header logic-head av-settings-head"></h1>
<div class="col-xs-12 col-xs-12 col-lg-12 tabcontent">
<form class="form-horizontal formtext col-xs-12 col-sm-10 col-lg-10 row">
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Name</label>
</div>
<div class="col-sm-5">
<input id="NewobjectName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Description</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<textarea id="objectDescription" rows="3" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Type</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<select class="form-control">
<option>M</option>
<option>C</option>
<option>CM</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">IsActive</label>
</div>
<div class="col-sm-5">
<input type="checkbox" checked="true" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">
</label>
</div>
<div class="clearfix"></div>
<!-- Groups Area Tables Start -->
<div class="row">
<div role="tabpanel" class="tab_bg">
<!-- Nav tabs -->
<div tabset justified="true" ng-if="clientScript.specification=='commonSpecific'">
<div tab heading="Scocu ClientScript">
<div class="tab-content pad25 users-area">
<div role="tabpanel" class="tab-pane mart15 active" id="objectPermissions">
<div class="form-group">
<div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
<label class="control-label">Javascript Type</label>
</div>
<div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
<select class="form-control" ng-change="onEventChange(script.event)" ng-options="obj.eventName as obj.label for obj in events" ng-model="script.event">
<option value="">-select event-</option>
</select>
</div>
</div>
<div class="method-tab" id="method-tab">
<div class="row form-group btnbg">
<div class=" col-xs-12 col-sm-6 col-lg-12">
<button class="btn btn-primary pull-right">ADD +</button>
<div class="clearfix"></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12 well pad0">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs method-right">
<li class="active"><i></i>Script 1
</li>
<li class=""><i></i><a data-toggle="tab" href="#group-2">Script 2</a>
</li>
<li class=""><i></i>Script 3
</li>
<li class=""><i></i>Script 4
</li>
</ul>
<div class="tab-content content-left">
<div class="tab-pane col-xs-12 col-sm-8 col-lg-12 pad0 marl19 active" id="name">
<div class="col-lg-12">
<h4>Javascript Editor</h4>
</div>
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body min-height">
<div id="editor">
function foo(items) { var i; for (i = 0; i < items.length; i++) { alert("Ace Rocks " + items[i]); } }
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="row form-group btnbg">
<div class=" col-xs-12 col-sm-6 col-lg-12">
<button class="btn btn-primary pull-right">SAVE</button>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<button id="saveObject" class="btn btn-primary" ng-click="save()">
Validate
</button>
</div>
</div>
<div tab heading="Scocu SQL">
</div>
<div tab heading="Scocu HTML">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-lg-7 btnbg">
<button id="saveObject" class="btn btn-primary " ng-click="save()">
SAVE
</button>
</div>
</div>
</form>
</div>
If you want to see the value inside the div use
var element=document.getElementById("editor");
alert(element.innerHTML);
Check this link

Categories