I would like to use the Fuel UX search control. I design a form as shown below to declare the Fuel Search control:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="search input-group" role="search">
<input type="search" id="searchprefix" class="form-control" type="text" placeholder="Search Prefix">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</form>
The search control is displayed as expected. However, I don't know how to define the JavaScript function to be invoked when the user types search prefix inside the control and hit Enter. Can someone show me a working example?
You need to define listener that will be triggered on pressing search (from fuel ux documentation):
searched.fu.search -- This event fires when a user presses Enter within the input or clicks the button.
cleared.fu.search -- This event fires when the user clears the input.
All search events are fired on the .search classed element.
Example:
Html code:
<div class="search input-group" role="search" id="mySearch">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
Javascript code:
$('#mySearch').on('searched.fu.search', function(evt, data) {
// data will then contain your search string .. in this place you have to place your search handler code
alert(data);
});
Related
I have a search box with input-prepend and input-append groups.
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
<input class="form-control autocomplete" type="text" name="q" value="..." aria-label="Search" autocomplete="off">
<div class="input-group-append barcode-scan d-none">
<i class="bi bi-upc-scan"></i>
</div>
</div>
bootstrap-autocomplete is used for autocomplete widget.
However, the dropdown alignment breaks when reducing the browser width:
The dropdown shifts left. It's aligned with 'Search' and not the input element.
The appended input group is rendered as part of the dropdown and not the search element. See image below.
Any pointers appreciated.
I have two forms in one form.hbs page but with the same process.js file to process these two forms on different occasions with two different submit buttons.
When I hit the first submit button, it should be processed inside the process.js file and sent to the database, and when I hit the submit button of the second form in the same page, it should be processed still inside the process.js file and sent to the database. The first one works, but the second one doesn't, it keeps trying to submit the content of the first form. Please how do I solve this problem?
Thanks in advance.
forms.handlebar
{{!-- FIRST FORM - MATERIAL FORM --}}
<div id="materials">
<form action="/forms" method="POST" autocomplete="off">
<input type="hidden" name="_id" value="{{materials._id}}">
<div class="form-group">
<label>Category of Material</label>
<input type="text" class="form-control" name="matName" value="
{{materials.matName}}"
placeholder="Material Title">
<div class="text-danger">
{{materials.matNameError}}
</div>
</div>
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" name="desc" value="{{materials.desc}}"
placeholder="Material Description">
<div class="text-danger">
{{materials.descError}}
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">
<i class="fa fa-database"></i>Submit</button>
<a href="/material-list" class="btn btn-danger">
<i class="fa fa-list-alt"></i>All Material records
</a>
</div>
</form>
</div>
{{!-- SECOND FORM - EQUIPMENT FORM --}}
<div id="equipments" style="display:none">
<form action="/forms" method="POST" autocomplete="off">
<input type="hidden" name="_id" value="{{equipments._id}}">
<div class="form-group">
<label>Title of Equipment</label>
<input type="text" class="form-control" name="eqName" value="
{{equipments.eqName}}"
placeholder="Equipment Title">
<div class="text-danger">
{{equipments.eqNameError}}
</div>
</div>
<div class="form-group">
<label>Quantity</label>
<input type="desc" class="form-control" name="quantity" value="
{{equipments.quantity}}"
placeholder="Quantity of Equipment">
<div class="text-danger">
{{equipments.quantityError}}
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">
<i class="fa fa-database"></i>Submit</button>
<a href="/equipment-list" class="btn btn-danger">
<i class="fa fa-list-alt"></i>All Equipment records
</a>
</div>
</form>
</div>
router.js
//launching all forms
router.get('/forms', MaterialController.launchForm);
//posting & updating data to db
router.post('/forms', MaterialController.createElement)
router.post('/forms', EquipmentController.createElement);
//getting list of existing items
router.get('/material-list', MaterialController.Lists)
router.get('/equipment-list', EquipmentController.Lists)
//getting list by ids
router.get('/:id', MaterialController.ids)
router.get('/:id', EquipmentController.ids);
//deleting items from db
router.get('/delete/:id', MaterialController.delete);
router.get('/delete/:id', EquipmentController.delete)
I know there's a way to use javascript to choose which button is being clicked for submission, but I really don't know how to implement this.
Please any assistance offered will be highly appreciated
Thank you.
May it will be better to set "submit" action on form (as result remove tags)
const elemetns = {
equipmentsForm: document.getElementById('equipments') <== set this id to form,
materialsForm: document.getElementById('materials') <== set this id to form
}
after add submit to each form
elemetnts.equipmentsForm.submit(e => processForm(e, elemetnts.equipmentsForm, someRoute))
elemetnts.materialsForm.submit(e => processForm(e, elemetnts.materialsForm, someRoute))
after it create "processForm" func
fucntion processForm (e, form, route) {
e.preventDefault();
const data = new FormData(form);
$.ajax({
type: "POST",
url: route,
data
}).done(() => console.log('success'));
}
here i use $.ajax. But you can use new XMLHttpRequest() constructor. Find out how create XMLHttpRequest.
so, i think, it is enought to solve your case.
Best regards!
I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.
So how do I make it submit a form? If you can give me a script to do it, that would be fine too.
(I don't know javascript myself)
My current code:
<form action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
If I understand you correctly you want to submit the form when you press the button using javascript?
<form id="test" action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.
Here is your solution,
<form action="myloc" method="post" id="myForm">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Javascript code
var button=document.getElementById('sub');
button.onclick=function(){
document.getElementById("myForm").submit();
}
Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.
In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
I am using a bootstrap dropdown and I want to trigger it with some other button.
<li class="dropdown">
Insert TA<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form class="navbar-form navbar-left" >
<div class="form-group" id = "TAform">
<input type="text" class="form-control" placeholder = "Roll Number" required>
<input type="text" class="form-control" placeholder = "M.A.C address" required>
</div>
<button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
<button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
<button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
</form>
</ul>
</li>
I want this to be triggered (open) when I click on this other button:
<button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>
ie what should be I put inside the deleteTA() function.
In your case you need to toggle dropdown this way:
function deleteTA(e) {
$('.dropdown-toggle').dropdown().dropdown('toggle');
e.stopPropagation();
}
Where you pass event object into function:
<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>
It's important here that you stop event propagation otherwise dropdown will immediately close.
Demo: http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview
In the bootstrap documentation on dropdown (with interactive examples enabled) it is given in "Usage" section as:
$('.dropdown-toggle').dropdown()
Hope that helps.