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>
Related
I have this form where an error message shows under every field if I leave it empty or invalid.
<form #projectForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
<label class="control-label">code</label>
<input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
<span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
</div>
<div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
<label class="control-label">libelle</label>
<input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
<span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
</div>
<button type="submit" class="btn btn-primary" >submit </button>
</form>
But when it comes to the submit button , I don't want the submit button to be disabled until the form is valid, instead I want the submit button border to become red and a red error message shows under the submit button when clicked and the form is invalid. How can I achieve that ?
try this:
on your component
success: any;
constructor ()
{
this.success = true;
}
onSubmit(){
if(this.yourform.invalid){
this.success= false;
return;
}
}
on your html
<div *ngIf="success;then content else other_content"></div>
<ng-template #content>
<button type="submit" class="btn btn-primary" >submit </button>
</ng-template>
<ng-template #other_content>
<button type="submit" class="btn btn-primary" style="border: 2px solid red">submit
</button>
<!-- your error message goes here -->
</ng-template>
i copied the *ngIf here at How to use *ngIf else?
I would go with simple getter to manage state of the 'submit btn'
get isFormValid():boolean {
this.ngForm && this.ngForm.valid;
}
then
<button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>
We have to override the default behaviour of submit button. So, remove the button type as submit and add click event to it
<button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>
Remove the submit event in form tag
<form #projectForm="ngForm">
Add the conditional class to the button
<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>
.invalid-form-btn {
border: 1px solid red;
}
I need you help, I have a form in PHP, javascript, HTML and MYSQL. I use a bootstrap for template.
I have a two button (continue button and add button)
<form class="form-horizontal form-label-left" action="PHP/GuardarMetodoque.php" method="POST" novalidate>
<div class="form-group">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary" onclick="return continuar();">Continuar</button>
<button type="submit" class="btn btn-primary" onclick="return continuar();">Continuar</button>
<input type="hidden" name="metodoque" value="metodoque" />
<button type="submit" class="btn btn-primary" onclick="return continuar();">Añadir Riesgo</button>
<input type="hidden" name="Anadirriesgo1" value="Anadirriesgo1" />
<input type="hidden" name="ID_proceso" value="<?php echo $_id; ?>">
<input type="button" class="btn btn-primary" value="Regresar" onclick="history.back(-1)" />
</div>
</div>
</form>
the continue button serves to pass another page and the add me button works to add data from the answered form.
as you see called the file "PHP/GuardarMetodoque.php" and it works but when you click continue, you save the form again, and what I want is for you to just send me the other form without saving anything
If you set button type to submit for continue button it will submit the form to mentioned action url, Try:
<button class="btn btn-primary" id="continue">Continue</button>
Add jquery to handle button click event:
$('#continue').click(function(){
//do your logic here
});
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.
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);
});
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.