I am using JS knockout, see this example code:
<div data-bind="foreach: qcitems">
<input data-bind="value: $root.itemnumber" class="form-control" />
<button data-bind="click: $root.getItemNumber" class="form-control btn-warning">
Click Get Item Number
</button>
</div>
<button data-bind="click: addQCitem, enable: qcitems().length < 3" class="btn btn-default">
Add another item
</button>
In this I have an itemnumber textbox and getItemNumber button. I want to set a value when this button is clicked.
If possible I want to have getItemNumber spawn a popup window, to I will be able to get feed from API and set the value.
I can't understand your question but I guess this will help you,
Edited View
<button data-bind="click: $root.getItemNumber" class="form-control btn-warning" onclick="transferData('$root.getItemNumber');">Click Get Item Number</button>
here: the 'transferData' will send a string variable = getItemNumber to your Javascript
Script
function transferData(x) { $('#popWindow').value(x); }
and after passing it to the javascript you need to add the ID of your popWindow here '#popWindow'.
this script will get your getItemNumber value and transfer that value to your popWindow value.
Related
I want to download a file that its name has been saved in my database. I use the following code to download the file:
public async Task<IActionResult> DownloadPm(string fileName)
{
.
.
.
}
And use the following code in view:
<form method="get">
<button type="submit" class="btn btn-success btn-table" asp-controller="Page" asp-
action="DownloadPm" asp-route-fileName="#item.mainFileName">ِDownload</button>
</form>
The problem is that the input parameter in DownloadPm action is null.
You are using tag helper with a button which actually does nothing but triggers the html form. To keep your current code you can have a hidden field in the form which will post the value to the action. Sample code:
<form method="get">
<input name="fileName" type="hidden" value="#item.mainFileName">
<button type="submit" class="btn btn-success btn-table" asp-controller="Page"
asp-action="DownloadPm">ِDownload</button>
</form>
Better approach: Since you are using Http GET and there is no other control in the form then why bother with Form? Instead go with an anchor element and style it like a button. Like the followings:
<a class="btn btn-success btn-table" href="/Page/DownloadPm?fileName="#item.mainFileName">Download</a>
So I stumbled upon a weird one...
I am using angular material's form field component to create my forms...
I noticed that if I use a button inside the mat input field as matSuffix, if I try to submit the form from another field (pressing enter for example)... that field get's the focus and the button (suffix) gets clicked...
Even wrapping the angular material's example and wrapping it in a form I get the same:
https://stackblitz.com/edit/angular-frc7tj?file=app/form-field-prefix-suffix-example.html
<div class="example-container">
<form>
<mat-form-field>
<input
matInput
placeholder="Enter your password"
[type]="hide ? 'password' : 'text'"
/>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input
matInput
placeholder="Amount"
type="number"
class="example-right-align"
/>
<span matPrefix>$ </span>
<span matSuffix>.00</span>
</mat-form-field>
</form>
</div>
Just type something into the first (password field) and then click into "amount" field and press enter, observe what happens
the first one gets the focus and the button suffix is clicked....
how can I prevent this behaviour and actually enforce the normal, expected one (form submission on enter key)?
Just add type="button" to buttons inside the form. By default, type="submit" is using and you are trying to submit the form by pressing Enter key. See StackBlitz.
I have a text input in my Ionic application that has 2 buttons in the same span. The first button is used to conduct a search and the second is used to clear the text input. I'm seeing odd behavior when I tap the clear button, the text input is cleared and the keyboard reappears but the text field does not have focus.
Can anyone help so that I can make sure the text input still has focus after clearing the text? Thank you.
<form class="list">
<span class="item item-input-inset">
<label class="item-input-wrapper address-label" name="addressLabel">
<i class="icon ion-ios-search placeholder-icon" ng-show="!address.length"></i>
<input type="text" class="address-input" placeholder="Search By Address" ng-model="address" autocomplete="off" autocorrect="off" autocapitalize="off">
</label>
<button type="submit" id="button1" class="button button-small custom-btn ion-search" ng-click="search(address)" ng-show="address.length"></button>
<button ng-click="address = ''" class="button button-small custom-btn ion-close-round" ng-show="address.length"></button>
</span>
</form>
Take a look at this post from the ionic framework forums. Seems like this would work and give you a more native look and feel.
<div class="list list-inset">
<div class="item item-input">
<input type="text" placeholder="mail stop"
name="mail_stop_name"
>
<i class="icon ion-ios-close placeholder-icon"
data-tap-disabled="true" on-touch="formData.mail_stop_name = ''"></i>
</div>
</div>
Ref:
https://forum.ionicframework.com/t/clear-button-inside-input-causes-input-to-loose-focus/17016
I am new to Thymeleaf. I am trying to add a class based on the selected radio button in a for loop.
<div class="btn-group" data-toggle="buttons">
<div th:remove="tag" th:each="obj : ${T(com.sab2i.esabplugin.model.NatureEnum).values()}" >
<label class="btn btn-primary" th:classappend ="...?'active'">
<input type="radio" autocomplete="off" th:field="*{nature}" th:value="${obj}" />
<span th:text="#{${obj.value}}">Radio</span>
</label>
</div>
</div>
what test should I be making to compare the value of "nature" against the value of loop variable "obj", in order to add the "active" class in th:classappend?
Thank you.
did you try th:classappend="(${obj} eq *{nature})? 'active'"
if *{nature} is a String try th:classappend="(${obj.name()} eq *{nature})? 'active'"
How do I prevent "button1" from executing the emailform.php action?
I have three buttons on my page; two of which are supposed to just make sure the text boxes are not blank and the third one is a "submit" button that is supposed to email me the form results via a emailform.php action. The problem is that when I click on button 1 to validate the text boxes, it does that correctly but then tries to email the form.
<form name="surveyform" action="/emailform.php" method="post">
<button id="button1" onclick="return validate_question1()">Go to question 2</button>
<button id="button2" onclick="return validate_question2()">Go to question 3</button>
<input name="submit" value="submit" class="submit" type="submit" />
Try this -- set the type:
<button type ="button" id="button1" onclick="return validate_question1()">
Might need to see the onclick function.