More boostrap modal form, submit not working properly - javascript

I have two problems!
1st: On my page there are more bootstrap form (loginFrom, signUpForm,...), if I click on the submit button the loginForm submitted, but the signUpForm NOT, and the submit() function for signUpForm not called at all.
The structure is same, so I dont know why? What could be the problem?
Most of the content is in PHP file, because I include them into each other. (multi-page website)
modal.php
<form id="loginModal" method="post" name="loginModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div id="loginModalDiv" class="modal-content">
<!--Header-->
<div class="modal-header myModalHeader">
<h4 class="title"><i class="fa fa-user-lg"></i> Login:</h4>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="logF_email" name="email" class="form-control">
<label for="logF_email">E-mail address:</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="logF_passw" name="password" class="form-control">
<label for="logF_passw ">Password:</label>
</div>
<div class="text-center mt-2">
<div id="errorLogin"></div>
<button id="btnLogin" type="submit" name="submitLogin" class="btn btn-default myModalBtn">Login <i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div id="footerLogin" class="modal-footer">
<div class="options text-center text-md-center mt-1">
<p>You don't have an account? <a class="loginToSignUp myGreenClass" data-toggle="modal" href="#"> Sign up!</a></p>
<p>Forget <a class="forgetPassword myGreenClass" data-toggle="modal" href="#"> password?</a></p>
</div>
<button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</form>
<form id="signUpModal" method="post" name="signUpModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div id="signUpModalDiv" class="modal-content">
<!--Header-->
<div class="modal-header myModalHeader">
<h4 class="title"><i class="fa fa-user-plus"></i> Sign up:</h4>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="regF_email" name="email" class="form-control">
<label for="regF_email">E-mail address:</label>
</div>
<div class="row mx-auto" style="width: 50%;">
<span id="passLED1" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">a-z</span>
<span id="passLED2" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">A-Z</span>
<span id="passLED3" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">0-9</span>
<span id="passLED4" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">[0]</span>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="regF_passw" name="passwordReg" class="form-control">
<label for="regF_passw">Password:</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-lock prefix"></i>
<input type="password" id="regF_passwConf" name="passwordRegConfirmation" class="form-control">
<label for="regF_passwConf">Confirmation password:</label>
</div>
<div class="text-center mt-2">
<div id="errorSignUp"></div>
<button id="btnSignUp" type="submit" name="submitSignUp" class="btn btn-default myModalBtn">Sign up!<i class="fa fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div id="footerSignUp" class="modal-footer">
<div class="options text-center text-md-center mt-1">
<p>Do you have an account? <a class="signUpToLogin myGreenClass"href="#"><br>Log in!!</a></p>
</div>
<button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</form>
validation.js
//Login form
$("#loginModal").submit(function(){ // OK
console.log('fut');
var errorMsg = "";
errorMsg += checkEmailField('#logF_email');
errorMsg += checkPasswordField('#logF_passw');
if (errorMsg == "") { $('#errorLogin').html('<div class="alert alert-success" role="alert">Please wait...</div>');
$('#loginModalDiv *').prop('disabled',true); $('#footerLogin').hide();
return true;}
else {$('#errorLogin').html('<div class="alert alert-danger" role="alert"><big>An error occurred while logging in!</big>' + errorMsg + '</div>'); return false;}
});
//Sign-up Form
// check the fields when the button is clicked!
// $(document).on('click', '#btnSignUp', function(event){
$("#signUpModal").submit(function(){
console.log('fut');
var errorMsg = "";
errorMsg += checkEmailField('#regF_email');
errorMsg += checkPasswordField('#regF_passw', 'regF_passwConf');
if (errorMsg == "") { $('#errorSignUp').html('<div class="alert alert-success" role="alert">Please wait...</div>');
$('#signUpModalDiv *').prop('disabled',true); $('#footerSignUp').hide();
return true;}
else {$('#errorSignUp').html('<div class="alert alert-danger" role="alert"><big>An error occurred while sending request!</big>' + errorMsg + '</div>'); return false;}
});
2nd: After I click on the submit button (LoginForm), the page is refreshing but I can't extract any data from the '$_post' variable.
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$mail = $_POST['email'];
$password = $_POST['password'];
...
or
if ( $_POST ){
or
if (!empty($_POST)){
I've tried many variation without any solution. Pls, help!

Related

How do I trigger a Modal with JavaScript?

I want to show a modal in my document when I click on an element. I am able to make it work with default bootstrap 'data-toggle' and 'data-target' attributes. But when I try to achieve the same effect with JavaScript, the modal is not showing up. Here is the relevant code:
<span class="navbar-text">
<a href="" id="login">
<span class="fa fa-sign-in fa-lg"></span>
Login
</a>
</span>
<script>
$(document).ready(function () {
$("#login").click(function () {
$("#loginModal").modal('show');
});
});
</script>
It just appears to fade in the modal for a split second but it does not show up.
Below is the modal div which I am trying to show:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>

Your code is correct, but you have not provided any HTML. I can only assume you followed the guides below to set up your site.
Edit: Since you provided your HTML, your problem is your href is empty, so it is going to an empty page. Change the anchor href to # or make it a button like in my full example below.
<a href="#" id="login">
Here is a perfect explanation: href must not reload. You can even throw in an onClick event for good measure.
Your fixed code
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
.navbar-text {
display: block;
border: thin solid #007bff;
margin: 1em;
padding: 0.5em;
border-radius: 0.5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="navbar-text">
<a href="#" id="login">
<span class="fa fa-sign-in fa-lg"></span> Login
</a>
</span>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Full button example
The Modal documentation has multiple examples of windows. I combined four documentation examples below to create a usable "Log In" function for a Bootstrap site.
Important steps
Ensure your button id is "login"
Ensure your modal window id is "loginModal"
Ensure your modal window is laid-out correctly
Ensure your modal window has the correct fade class
Resources
https://getbootstrap.com/docs/4.0/getting-started/download/
https://getbootstrap.com/docs/4.0/examples/pricing/
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/components/forms/
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" id="login" href="#">
<span class="fa fa-sign-in fa-lg"></span> Log In
</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Log In</h5>
<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-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Log In</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Inside bootstrap modal scroll to specific element is not working

I have used boostrap modal.in that we need to use scroll to specific element. i tried by using below code.but doesn't works
$('#centralModalLg').on('show.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
Updated:
when i open modal window at first time and scroll to the specific area.look at the below the screen shot
when open modal second time. the scoll should go the top but i got where i stoped last time.
Html:
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
<!--Content-->
<div class="modal-content" *ngIf="productDetails">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>{{productDetails?.productName}}
<span>
<img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
</span>
<span>
<img *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
</span>
</h4>
<div id="elementId" class="over-flow-md">
<img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- <hr /> -->
<p class="small pt-2">
{{ productDetails?.productDesc }}
</p>
<hr />
<div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
<h5 class="bg-light">{{addonCate.CategoryType}}</h5>
<div class="row pb-1">
<div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
<span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
<div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>
</div>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
<li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<label class="checkbox-inline checkbox">
<input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue" type="checkbox" value="option1" >
<span class="checkmark"></span>
<div class="checkbox-text">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
</div>
</label>
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
<li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
<input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-2">
<input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
</div>
<hr />
<div class="row addprice">
<div class="price col-sm-7">Choose Quantity</div>
<div class="text-right col-sm-2 ">
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
<ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
</strong>
</div>
<div class="text-right col-sm-3 ">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
<input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
</div>
</div>
</div>
<div class="bg-light p-0 pb-2">
<div class="row">
<div class="col-md-6">
<div class="mt-3 pl-3">
<span class="pr-1">Total:</span>
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
<ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
</strong>
</div>
</div>
<div class="col-md-6">
<button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
<span *ngIf="add_cart_loading != 'adding'">
<ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
<ng-container *ngIf="update_product_status">Update</ng-container>
</span>
<span *ngIf="add_cart_loading == 'adding'">
<ng-container *ngIf="!update_product_status">Adding</ng-container>
<ng-container *ngIf="update_product_status">Updating</ng-container>
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
How i can achieve this
Thanks in advance

Change "show" to "shown" when did you use bootstrap 3 or 4
$('#centralModalLg').on('shown.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
check that Bootstrap 3 codepen example
check that Bootstrap 4 codepen example

$('#centralModalLg').on('shown.bs.modal', function() {
$('#elementId').scrollTop(0);
});
A Fiddle with your code.
EDIT:
The issue is caused by the event listener, should be shown.bs.modal instead of show.bs.modal, updated the fiddle as well.
jQuery.scrollTop() could be conflicting if the event is started but not yet completed as of Bootstrap's official documentation :
the infinitive (ex. show) is triggered at the start of an event, and
its past participle form (ex. shown) is triggered on the completion of
an action.

try this:
$('#centralModalLg').on('show.bs.modal', function() {
setTimeout(function() {
var $elem = $('#scrollto') // add this ID to an element you want scroll to
var $container = $("#elementId")
$container.scrollTop(0) // edge case - reset scroll in case it is reopened
var t = $container.offset().top
$container.scrollTop($elem.position().top - t);
}, 500) // run after modal animation
});
It is based on this answer: https://stackoverflow.com/a/21179878/8164758
Here is working jsfiddle example: https://jsfiddle.net/954jnt2y/1/

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>

I can't clear form data from bootstrap modal

i have a little problem when im trying to clear bootstrap modal data..
there is my modal.
<div id="modal-creacion-alias" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<form id="form-alias-dominio" method="POST" class="form">
<div class="modal-content">
<div class="form-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h2 class="modal-title">Alias de dominios</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Nombre del Alias<span class="required">*</span></label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Contraseña" data-container="body"></i>
<input type="text" class="form-control" name="nombre-alias-dominio" id="nombre-alias-dominio">
<br>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer ">
<button type="button" data-dismiss="modal" class="btn default">Cancelar <i class="fa fa-sign-out"></i></button>
<button type="submit" id="crear-alias-domino" class="btn gtd-blue-hard crear-alias-domino">Crear <i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the js function:
$('body').on('hide.bs.modal', '.modal', function () {
&(this).removeData('bs.modal');
});
but when i close and re open modal the data still there.
how can i solve it?
thanks.

You can reset all input data by using $(form).trigger('reset')
$('body').on('hide.bs.modal', '.modal', function () {
$('#form-alias-dominio').trigger("reset"); //here your form_id
});

I was able to clear data doing this
$('body').on('hide.bs.modal', '.modal', function (e) {
$(this).find('form').trigger("reset");
});
thanks #Sadikhasan

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