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.
Related
I am using the Angular Component library which includes material-input. Is there a way to disable input auto validate when changing or emptying the material-input? Meaning that I want to only validate the form upon submit.
Plus the onSignInPressed() function is not getting triggered on submit despite that the material-button is of type submit.
<div class="container">
<form (ngSubmit)="onSignInPressed()" #signInForm="ngForm">
<div>
<material-input
floatingLabel type="email"
label="E-mail"
[(ngModel)]="email"
ngControl="email"
required></material-input>
</div>
<div>
<material-input
floatingLabel type="password"
label="Password"
[(ngModel)]="password"
ngControl="pass"
required></material-input>
</div>
<div class="w-100">
<material-button class="mx-0 btn-primary w-100 margin-zero" type="submit"
[disabled]="!signInForm.form.valid">
Sign In
</material-button>
</div>
</form>
</div>
You can try to use a different value accessor on the material-input, however you won't be able to validate the form on submit.
With changeUpdate, validation will be triggered on blur or when press ENTER
<material-input changeUpdate [(ngModel)]="value"
Docs
About the material-button, there is an issue on github with a hacky solution.
You can also try to add an hidden input
<input type="submit" hidden />
This should be easy to fix, but I can't find out why it's not working.
I have a web "app" that runs in Safari, and it's made for users to add to the home screen. There's a web form where the user enters a first and last name. Here's the simple code for that form.
<fieldset>
<div class="row">
<label>First Name</label>
<input type="text" name="first_name" id="pFirstName" value="" autocapitalize="on" autocorrect="off" placeholder="John" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" name="last_name" id="pLastName" value="" autocorrect="off" autocapitalize="on" placeholder="Doe" />
</div>
</fieldset>
Very simple. The problem is that the Last Name form is not capitalized when the user switches to it. I ran it directly in mobile Safari, and it worked fine. When I added to the home screen, I had the same issue...
Is this just a bug in iOS/webkit (because it used to work...)? Not sure if there's some sort of script to force the auto-capitalization? Thanks!
Edit: If I click on the field directly, it capitalizes. The problem is when I fill in text for first name, and click the "Next" arrow on the top of the keyboard.
Try using autocapitalize="sentences"
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.
Is there a way to use some pageinit event for a popup, in order to populate an input box with an email address from the main page?
So in my html, I have 1 page declared as data-role="page" and one popup declared as data-role="popup". In the "page" I have an input containing an email address, and a button that calls the popup. In the popup I have some text, another input text and 2 buttons. This input box must be populated with the contents of the main page input box value. How can I achieve that? Is there some pageinit event for popups too?
So here is my main page declaration (pg_main)
<div data-role="page" id="pg_main">
<input type="email" name="emailadr" is="emailadr" value="" />
<input id="sendemail" class="emailclass" type="button" name />
</div>
and now the popup (sendm)
<div data-role="popup" id="sendm" class="ui-content">
<h3>Send the email</h3>
<p> Confirm email address below</p>
<input type="email" name="adresa" id="adresa" value="" />
<input type="button" id="emailok" value="Send" />
<input type="button" id="emailno" value="Give up" />
</div>
Of course I have some code that fills the input in pg_main with a valid email address, but that is not my issue.
In my script, I call the popup like this:
$(document.body).on('click','.emailclass', function(){
$('#sendm').popup("open");
});
How can I fill the $('#adresa') from popup sendm with the value of $('#emailadr') from page pg_main?
Thank you
What you need is this code:
$("#sendm").on("popupafteropen", function( event, ui ) {
$('#adresa').val($('#emailadr').val());
});
It will be executed when popup is opened. Event used here is called popupafteropen and you can find more about it in an official documentation.
Working example made form your code: http://jsfiddle.net/Gajotres/Q5KSV/
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.