I have two input fields that take values automatically from the browser in my Angular project, I tried with the option HTML autocompete, but it’s not changed.
this is my HTML Code:
<div class='name' *ngIf="COMPTE_FRANCAIS==true">
<input type="text" autocomplete="off" [(ngModel)]="driver.loginAm"
[placeholder]="'DRIVERS.FORM.LOGIN' | translate" [matTooltip]="'DRIVERS.FORM.LOGIN' | translate">
<input type="password" autocomplete="off" [(ngModel)]="driver.pwdAm"
[placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">
<a href="https://authps-espacepro.ameli.fr/" target="_blank" rel="noopener noreferrer"
style="margin-top: auto;">
<button class="btn btn-ameli">
<img src="./../../../../assets/img/ameli.png">
</button>
</a>
</div>
and this is a screenshot for the problem:
screenshot
the solution is to add new-password to the autocomplete in the password input
<input type="password" autocomplete="new-password" [(ngModel)]="driver.pwdAm"
[placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">
You need to add fake input fields to allow that browser use that fake fields and you continuous using yours correctly.
<div class='name' *ngIf="COMPTE_FRANCAIS==true">
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
<input type="text" autocomplete="off" [(ngModel)]="driver.loginAm"
[placeholder]="'DRIVERS.FORM.LOGIN' | translate" [matTooltip]="'DRIVERS.FORM.LOGIN' | translate">
<input type="password" autocomplete="off" [(ngModel)]="driver.pwdAm"
[placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">
<a href="https://authps-espacepro.ameli.fr/" target="_blank" rel="noopener noreferrer"
style="margin-top: auto;">
<button class="btn btn-ameli">
<img src="./../../../../assets/img/ameli.png">
</button>
</a>
</div>
Let me know if this works for you
Related
I have a form that uses a calendar with an input field. For some reason when I press the Enter key while on the input field it doesn't submit the form. Instead the focus is moved onto the calendar icon in the form. I tried changing the type to = submit and to button, but the behavior doesn't change. What can I do to make sure that the form gets submitted while the user is on the input field?
<form id="form" name="form" action="process">
<div class='row' tal:condition="python:op in ['search', 'add', 'view']">
<div style="width: 5em;"><label for="date">Date</label></div>
<div tal:content="structure python:container.util.getDateTimeInputsA11y(form_name='form', my_date=DateTime().strftime('%m-%d-%Y'), date_field='date',type_date=0, date_arrows=1, use_clear='yes')"></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add']">
<div><label for="time">Time</label></div>
<div><input type="text" id="time" name="time" tal:attributes="value python:DateTime(fix_date).strftime('%H%M')" maxlength="4" nofocus="1" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['search', 'add', 'unit']">
<div><label for="unit">Unit</label></div>
<div><a tal:define="opt_select_cond python:'unit.patients=\'Y\'';"
tal:replace="structure python:container.util.getUnitSelects(my_form='form', my_var='unit', my_var_value=unit, unit_type='sch_unit', text_input=1, multiunit=0, opt_select_cond=opt_select_cond)" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add', 'edit']">
<div><label for="room">Room</label></div>
<div><input type="text" id="room" name="room" tal:attributes="value python:str(bed.get('room') or '').strip();" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add', 'edit']">
<div><label for="bed">Bed</label></div>
<div><input type="text" id="bed" name="bed" tal:attributes="value python:str(bed.get('bed') or '').strip();" /></div>
</div>
<div>
<div>
<input type="hidden" id="op" name="op" tal:attributes="value python:op;" />
<input type="hidden" id="bed_id" name="bed_id" tal:attributes="value python:int(request.get('bed_id') or 0);" />
<input type="button" class="btn btn-light" id="submit_btn" tal:attributes="value python:op.title();" />
</div>
</div>
</form>
I also noticed that the tal:replace structure calls this print line in a python file.
print """
<input type="%s" name="%s" id="%s" aria-label="%s" class="uppercase" value="%s"
onfocus="this.select();"%s size="10" maxlength="10">
""" % (test(text_input,'text','hidden'), my_var, my_var, my_var_title, my_var_value, test(onchange, ' onchange="%s"'%(onchange), ''))
I removed the onfocus on that print line but same issue still occurs.
For any form to submit after enter, you need to have either:
<button type="submit"></button>
or:
<input type="submit" />
in it which is missing in your code.
It's working now after I added a script tag for event listener. Still unclear why pressing Enter key changes the focus to calendar.
let unit_input = document.querySelector('#unit');
unit_input.addEventListener('keydown', (e) => {
switch (e.key)
{
case 'Enter':
document.getElementById('submit_btn').click();
}
<form action="index.php" method="POST">
<img src="C:\xampp\htdocs\Online_Examination_System\images\User_Icon.png" id="icon" alt="User Icon" />
<input type="text" id="login" class="fadeIn second" name="uname" placeholder="login">
<input type="password" id="password" class="fadeIn third" name="pass" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In" name="subt">
</form>
I need some help for the above code as I want to display an image in my html form so if any one could suggest something please. The image is not shown instead its alternate text i.e "User Icon" always appear
You are giving wrong image address in image src.
<form action="index.php" method="POST">
<img src="./images/User_Icon.png" id="icon" alt="User Icon" />
<input type="text" id="login" class="fadeIn second" name="uname" placeholder="login">
<input type="password" id="password" class="fadeIn third" name="pass" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In" name="subt">
</form>
Note: your image must be in images folder.
your file path is wrong and it shows your alternate text.
try it:
<img src="./images/User_Icon.png" id="icon" alt="User Icon" />
be sure that your User_Icon.png is in images folder!
good luck.
You have to use '/' instead of '\'.
Your path should be : "./images/User_Icon.png"
I have the following code and the captcha field need to be only say 10 characters. As is the length seems to be endless.
I wanted the webpage field for the captcha to be only say 7 characters only.
<div class=" col-sm-4 ">
<div id="myapp" ng-controller="subscribe_controller">
<h4 style="color:black;" >Subscribe</h4>
<form id="subscribe_01">
<h4>
<p ng-bind="msg2"></p>
<input id="email2" style="color:gray;" type="text" name="EMAIL" placeholder="Your Email Adddress" value="" ng-model="email2"></h4>
<input id="token2" class="w3-input w3-section" type="hidden" name="token2" value="<?php echo $token;?>" >
<p>Code :<input id="captcha" type="text" placeholder="" required name="captcha" value="" ng-model="captcha" length="7" aw-limit-
length="3"><p>
<button class="w3-button w3-black" ng-click="postData_subscribe()" id="buttoncontact_subscribe">Send To Subscribe</button></p>
</form>
</div
>
I was the size option, so may ng-min ng-max .etc. but it was the old size
Getting some odd behavior with a single input field on my login form that only happens in firefox...in chrome it's completely fine. The code is no different than any other input field in the forms on the page but this one is choosing to appear outside of the form div and will not allow you to type in it, also looks like it has a 0% length or atleast the smallest length possible. I'm using bootstrap for the field/form css.
An html snippet of the form (id: email_login is causing the issue):
<form action="process_login.php" name="login_form" method="post" id="login_form" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email_login" type="text" class="form-control" name="email" placeholder="Email Address" />
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password_login" type="password" class="form-control" name="password" placeholder="Password" />
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input onclick="formhash(this.form, this.form.password);" value="Login" id="btn-login" type="button" class="btn btn-primary" />
<i class="icon-hand-right"></i>
</div>
</div>
Heres an image of what's going on
Thanks in advance...will be happy to provide further info. I didn't include the css as it's just the standard bootstrap classes with no modifications.
EDIT:
I managed to fix this issue by modifying the .input-group class in bootstrap from display:table to display:inline-table.
This did not affect any other forms on my website, but managed to fix the display issue in firefox.
So consider it solved in my case.
I have a new login page which is not submitting. :(
If I click the button and the required fields are not entered, it fires me back the errors, but as soon as they're filled and I try to submit it does nothing.
The page is live at https://www.safewise.co.nz/trainwise/login
The code
<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
<?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
<div>
<p id="login-title">Login</p>
<input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
<input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
<div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
<p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
<div id="forgot"><p>Register</p><p>Forgotten Password?</p>
</div>
</form>
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
The weird thing is as soon as I remove this code it works.
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
Any suggestions?
Where is that div located in the page? It is incorrect to have a form inside a form. And so your code may work when you remove the div above because you've taken out the second form.
Consider having them as two separate entities instead of nested.
Are these forms nested? You cannot have nested forms. You can have multiple forms in a page, just as long they're not nested.
Here's some ref on it http://www.w3.org/MarkUp/html3/forms.html
I was missing a closing div
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
Needs a closing div at end
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
</div>