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);
});
Related
I have an HTML user interface that uses Bootstrap, and has a dropmenu as well as some input fields. What I want to be able to do is populate the input field with the value of the drop-menu selection. So far I haven't been able to bind to that value and have it show up in the input value field.
Here is my code:
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<!-- <p id="selection"></p> --> // Works if I populate it here
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
// ... other code
<script>
function populateJobVal(val) {
document.getElementById("selection").innerHTML = val;
}
</script>
I tried this:
<input type="text" class="job-name form-control" value="selection">
And this:
<input type="text" class="job-name form-control" id="selection">
... but it did not bind to the input field.
How can I get the value selected when my button is clicked to appear in the input text box?
Just swap the innerHTML to value and you're good to go.
function populateJobVal(val) {
console.log(val);
document.getElementById("selection").value = val;
}
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control" id="selection"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
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>
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
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>