I have a form inside a dropdown. When I click on an input in the form the dropdown menu closes. Is there a way I can prevent this?
The code looks like this:
<li class="nav-item dropdown">
<a id="loginLink" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Log in</a>
<div id="loginModal" class="dropdown-menu dropdown-menu-right" role="dialog">
<form class="dropdown-item" novalidate name="f1" ng-submit="login()">
<div class="modal-body">
<div class="alert alert-danger" role="alert" ng-show="(error.length > 1)">
{{error}}
</div>
<div class="input-group">
<span class="input-group-addon" id="login-email-addon">Username:</span>
<input type="text" ng-model="userLoginEmail" class="form-control" placeholder="username" aria-describedby="login-email-addon" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="login-pass-addon">Password:</span>
<input type="password" class="form-control" ng-model="userLoginPassword" placeholder="password" aria-describedby="login-pass-addon" required>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Log in" required />
</div>
</form>
</div>
</li>
I tried stopping it using this:
$(document).ready(function () {
$(document).on('click', '.dropdown-item', function (e) {
e.stopPropagation();
});
});
But that doesn't seem to stop it. In fact when the method runs, the menu is already closed
Related
I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?
You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!
I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
This is what I want to do: When the dropdown item is clicked I want to add a new div with an input inside of it and name it based on the clicked item. I'm a complete newbie to javascript. Can someone give me ideas on how to do this?
Here's a sample picture. Example when I click an item in dropdown menu it will add another div with input type inside of it. Like the Major Exam.
Here's my code.
<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Criteria for grading</h4>
</div>
<div class="modal-body edit-content">
<form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"> Add Criteria <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Assignment</li>
<li>Attendance</li>
<li>Laboratory</li>
<li>Activity</li>
<li>Recitation</li>
</ul>
</div>
<br>
<div class="well">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well">
<label for="majore">Quizzes</label>
You question is tagged jQuery, so I will use it.
$(".dropdown-menu li").on("click", function(){
var name = $(this).find("a").text();
var newDiv = $(".well").first().clone();
$(newDiv).find("label").text(name);
newDiv.insertAfter(".well").last();
});
I would think you'd want to add the name of the dropdown li clicked to the new form, but you didn't include that in your question.
I dont understand a problem. I copy/pasted this code form manual for bootstrap...
form {
padding: .5em 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<button type="button" class="btn btn-default">Dropdown <span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Check me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div>
I want to make input group inline in a list. I wrote the following code :
<div class="container-fluid">
<div class="row">
<ul class="list-inline pull-right">
<li>
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</li>
<li>
<div class="input-group">
<input id="address" placeholder="City or Zipcode" class="form-control" type="textbox">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addressSearch">Search</button>
</span>
</div>
</li>
</ul>
</div>
</div>
I am not getting input group inline. Please help me to solve this.
You can wrap the first button and the group of elements that you want to in-line with the .input-group class. I am note sure if you're attached to using unordered lists but the code is more expressive if you use spans since what you're representing in on the page is not an unordered list of items.
<div class="container-fluid">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div><!-- /input-group -->
</div><!-- /.row -->
</div>
I'm trying to pass some user entered data from a bootstrap form and push the values to a modal in an MVC4 project in visual studio 2013, tried reading a few topics but I'm struggling to find a simple answer.
How do i get a value from my boostrap form elements and return within the modal. Ive tried adding the JQuery into the modal myself from the documentation but I'm doing something wrong here, can anyone help with this ?
Form Elements :
<div class="form-group">
<label class="control-label col-xs-2" for="iMei">IMEI:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="imei" name="imei" placeholder="IMEI">
</div>
</div>
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Android</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">IOS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Windows Phone</a> </li>
</ul>
</div>
</div>
</div>
My Modal :
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<a href="#" class="btn btn-success"
data-toggle="modal"
data-target="#basicModal">Create New Request</a>
<button type="submit" class="btn btn-primary">Back to List</button>
</div>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Summary</h4>
</div>
<div class="modal-body">
<script>
$('#basicModel').on('show.bs.model', function (e) {
var imei =
$(e.relatedTarget).data('imei');
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
In the end i used the following solution:
Jquery to send form data
$("#SendRequest").click(function () {
var imei = ("IMEI: " + $("#imei").val());
$('#printImei').html(imei);
var phonenumber = ("Phone Number: " + $("#phoneNumber").val());
$('#printPhoneNumber').html(phonenumber);
var policynumber = ("Policy Number: " + $("#policyNumber").val());
$('#printPolicyNumber').html(policynumber);
});
And in the Modal Body
<div class="modal-body">
<span id="printImei"></span><br />
<span id="printPhoneNumber"></span><br />
<span id="printPolicyNumber"></span>
</div>
Tell me how to pass the value selected from a list box
JavaScript:
$('.dropdown-menu li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('.category').val(selected);
});
HTML
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="hidden" name="category" class="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Admissible in the pop-up window I choose "1" to pass to the class = "form-control" value = "1"
Here is example code:
http://bootply.com/93417
What you have puts the value in a hidden text box called category. If you wish to have it in the search field add a new class (in this case i've added box) to its class attribute and call that in your script:
link: http://bootply.com/98806
like this:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control box" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="hidden" name="category" class="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
and change your script accordingly
$('.dropdown-menu li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('.box').val(selected);
});