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>
Related
I have a button called Update which I would like to be disabled until an option is selected from the drop-down menu.
So far I have the button disabled:
$('.btn-update').prop('disabled', true);
This is my markup for the buttons and drop-down menu:
<div class="col-md-12 tableContainer">
<div class="panel-heading import-song-panel text-center">
<div class="panel-title">
<ul class="list-inline">
<li class="pull-right">
<div class="dropdownContainer btn-group text-right">
<button type="button" class="btn btn-primary br2 btn-md fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
Select Status
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
Accept & Send
Accept
Reject
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 text-right">
<div class="panel-heading import-song-panel text-right">
<input type="button" class="btn btn-primary" id="js_CancelForm" value="Cancel" />
<input type="submit" class="btn btn-success btn-update" id="js_SubmitForm" value="Update" />
</div>
</div>
Would anyone be able to show me how I can enable the button only when a status is selcted from the drop-down menu.
You can add a class to the dropdown options and add a click event as well.
like:
$('.optclick').click(function(){
$('.btn-update').prop('disabled', false);
e.preventDefault();
});
https://jsfiddle.net/Lz8sxmqm/10/
You can add an onclick event on options of dropdown.
Accept & Send
and call an function on click event
function enableButton(){
$('.btn-update').prop('disabled', false);
}
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/
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 used JHipster to create my project and it has been pretty smooth sailing of late. However, I ran into an issue with editing objects on my main.html. I am able to successfully edit the post when I'm on the posts.html page that the router points to, but I am unable to do it with the exact same code on my main.html. I am able to call the information from the postController on my main page, and it is displayed adequately. I am, however, unable to make my data appear inside the modal popup. I know the information is being received by the controller because my console.log($scope.post) returns the object that I want to edit. However, that information is not transmitted to my modal. Any help appreciated.
Button that calls edit:
//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
Actual Modal Code:
<div ng-controller="postController">
<textarea class="form-control" rows="3" placeholder="Status update here..." data-toggle="modal" data-target="#savePostModal" ng-click="clear()"></textarea>
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="create()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Update function
$scope.update = function (id) {
$scope.post = Post.get({id: id});
$('#savePostModal').modal('show');
};
I know it's successfully calling this get function, but the data from the $scope.post isn't being used.
As it turns out, in order for a modal to work, it has to be in the same controller-div as the text that prints the button. I'm pretty sure this is because the scope on controllers is different if the div is different. Also, don't have a second modal with the same name for testing because it will inevitably fail because of the functions confusion over which one to use.
<div id="toBeUpdated" ng-controller="postController">
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
<li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
<div class="well ng-scope">
<div name="desktopPost" class="h4">
<input type="checkbox" name="checkered"> {{post.name}} <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<div style="display: none" name="mobilePost" class="h4">
<div ng-click="postNameAlert(post.name);">
<div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
</div>
<input type="checkbox" name="checkered">
<span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
</div>
<p>
<div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
</p>
<br> {{post.author}} on {{post.date_Written}}
<br>
<div name="desktopSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div style="display:none;" name="mobileSide">
<button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
<span class="glyphicon glyphicon-remove-circle"></span> Delete
</button>
</div>
<div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
<div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
<button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
<span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
</button>
<div class="well ng-scope">
<h4>
{{new_post.name}}
<div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
<span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
<a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
</h4>
<div id="{{new_post.id}}" style="display:none;">
{{new_post.text}}
<br> {{new_post.author}}
on {{new_post.date_Written}}
<br>
</div>
</div>
</div>
</div>
</div>
</li>
<center ng-if="checkForPosts()">
<button class="btn btn-default" ng-click="incrementLimit()">
<span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
</button>
</center>
</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);
});