I am creating a search bar using Bootstrap#input-groups-buttons
<form class="navbar-form navbar-left" action=".">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="Search ...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</form>
When I press Enter, the form could be submitted successfully,
http://127.0.0.1:8000/?q=test
However, when I click the button "Go", nothing happened.
How could I submit the form data when button is click?
Just change the button type as submit.
<button class="btn btn-default" type="submit">Go!</button>.
Check for details: https://www.w3schools.com/tags/att_button_type.asp :)
Suppose your form has the id of myForm
<button type="submit" class="btn btn-default" form="myForm" value="Submit">Go!</button>
I am betting you just need to bind the button to execute your event handler on click events - bootstrap handles the presentation, but you would also want something like jQuery to specify how to handle UI events.
You might want to read: Bootstrap onClick button event
Related
(using .NET Core 3.1)
I have a handler which works, however I can't call it from a <button/>. From an <a/> it works (but this will try to refresh my page and it's not what I want).
//GETS TO HANDLER
<a class="btn btn-info" asp-page-handler="SearchProductionRecords">
<i class="fas fa-file-excel mr-2"></i> Export Excel
</a>
//NEVER GETS TO HANDLER
<span class="input-group-append">
<button type="submit" asp-page-handler="SearchProductionRecords" class="btn btn-info btn-sm"><i class="fas fa-search"></i> </button>
</span>
//HANDLER
public async Task<IActionResult> OnPostSearchProductionRecordsAsync()
{
...
}
A button submit is associated with a form submit. Therefore, put the button inside a form method=post and it should work.
Kind Regards,
Maheshvara
I should click on this button. the html structure is as follows:
<div id="publishing-action">
<span class="spinner"></span>
<input name="original_publish" type="hidden" id="original_publish" value="Pubblica">
<input type="submit" name="publish" id="publish" class="button button-primary button-large" value="Pubblica">
</div>
with cypress I give it the following command:
cy.get('input[type=submit]').contains('Pubblica').click({force:true})
but the page is not published
if instead I manually click on the button it gives me this:
Try this Code:
cy.get('#publish').should('have.value', 'Pubblica').contains('Pubblica').click()
I'm working an application that uses Clarity's tab. Here's the code in my app.component file.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<ng-template [(clrIfActive)]="generalActive">
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</ng-template>
</clr-tab>
.....
Within the first tab I've embedded another component named header-comp that is defined as
<clr-input-container>
<label class="required">Table Name</label>
<input clrInput type="text" [(ngModel)]="tbl_nm" size="50" [ngModelOptions]="{standalone: true}"/>
<clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>
The problem I'm having is when I enter a timestamp value, stored in the configDetails model on app.component, and a table name, stored in the tbl_nm model of header.component, and then switch to the second and then back to the first tab, the table name is lost. The timestamp value is still present.
Why is the entered table name value lost when switching tabs? I don't think this is an issue of parent-child communication because app.component can read the entered table name value entered when the Submit button is selected and provided I haven't switched tabs first.
When you use the ng-template and structural directive clrIfActive, it actually removes the rendered template from the DOM when you switch tabs. This is for performance and is desirable in many cases. If you don't want the tabs to be reset, remove the template and clrIfActive directive.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</clr-tab>
</clr-tabs>
I am using CodeIgnighter framework. In my view I want to change the page when I click the button.
I set the base_url correctly.
Insert
Modify
You can also do it like this :
<form action="imports/add_user">
<input type="submit" value="Insert">
</form>
<form action="imports/modify_user">
<input type="submit" value="Modify">
</form>
In out AngularJs app, we changed the activeClass of buttons (as in toggle groups) to btn-default (from the default btn-primary), so all our CSS expects that.
I notice that ng-bootstrap also defaults to btn-primary but I don't see how (or if) that can be changed.
Is it possible for me to change the activeClass so my CSS is correct with the new components?
ng-bootstrap make use of bootstrap 4. Bootstrap 4 includes six predefined button styles, each serving its own semantic purpose. But it doesn't include a btn-default but with btn-secondary class you achieve the same styling.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary" [class.active]="model.left">
<input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
</label>
<label class="btn btn-secondary" [class.active]="model.middle">
<input type="checkbox" [(ngModel)]="model.middle"> Middle
</label>
<label class="btn btn-secondary" [class.active]="model.right">
<input type="checkbox" [(ngModel)]="model.right"> Right
</label>
</div>
If you still prefer to use the btn-default then you can make a class with that name in your component style and use it.
First of all, which version of angular are you using?
there's quite difference between ng versions
ng-1 angularjs.org - docs
<button ng-class="{'class1 class2 class3' : true}">
it's a button
</button>
ng-2/4 angular.io - docs
<button [ngClass]="{'class1 class2 class3' : true}">
it's a button
</button>