I have a table which has two text boxes and an image beside it to click and open a popup.
In read-only mode based on condition I am able to make text boxes read-only but images are not becoming read-only. One solution I had is the anchor tag associated with image calls for JavaScript where I can check for a dummy click when it is in read-only mode. The problem here is the function is common and affects everywhere. So is there a way to make the entire table read-only so that no extra workaround needs to done?
Edited for code
<table>
<tr>
<td class="lightbg" colspan='4'>
Expires:<input type="TEXT" value="" id="element1" name="expireDate" size="10" maxlength="20" class="" onChange="javascript:validateDateEntry('element1',true);;">
Period:<input type="TEXT" value="" id="element2" name="refershDate" size="10" maxlength="20" class="" onChange="javascript:validateDateEntry('element2',true);;">
<a href="javascript:doCalendar('element1');">
<img src="/PWM/images/images_2006/calendarbtn.gif" border="0" alt="Click to select date from calendar" align="absmiddle">
</a>
</td>
</tr>
<tr>
<td colspan='4'><b>*</b>Times are in the WFM Server's Time Zone.</td></tr>
</table>
An img is always readonly in html.
If you want to prevent the link from being clicked, you can do that in javascript.
jQuery example:
$('table a').click(function(event){
event.preventDefault();
});
Related
I have a website that i use so often for work, there's something in the page that really bothers me and i takes me a lot of time doing it like a normal user, so i found a solution by changing the HTML using chrome devtools, but the problem is that the HTML is very large and it takes a lot of time changing only one line manually.
Here is a part of the code :
<tr id="appl_tr" height="30">
<td valign="middle" class="styleBlack" width="34%" style="padding-left:10px;">
Birthdate : <span style="color:#F00">*</span>
</td>
<td width="66%" align="left" valign="middle">
<input type="text" name="dateOfBirth" class="form-control-input" id="dateOfBirth" value="" readonly="" >
</td>
</tr>
I want only using chrome console, to remove only that readonly="" thing in the sixth line, so it will be like this :
<input type="text" name="dateOfBirth" class="form-control-input" id="dateOfBirth" value="" >
Why not just use javascript in console?
document.querySelector('#dateOfBirth').removeAttribute('readonly')
I've got a simple form in HTML. Depending on the option chosen with the radio button, there are different input fields visible, using *ngIf.
<table>
<tr>
<td><label>name</label></td>
<td><input #name /></td>
</tr>
<tr>
<td>
<input type="radio" name="contact" value="phone" (click)="usePhone(true)" #p>
<label for"p">phone</label>
</td>
<td>
<input type="radio" name="contact" value="email" (click)="usePhone(false)" #m>
<label for"m">email</label>
</td>
</tr>
<tr *ngIf="phone">
<td><label>phone</label></td>
<td><input #phone /></td>
</tr>
<tr *ngIf="!phone">
<td><label>email</label></td>
<td><input #email /></td>
</tr>
<table>
In the TypeScript file, I declare a varibale "phone" of the type boolean and a method:
usePhone(phone: boolean): void {
this.phone = phone
}
Now, I want to get the values when clicking on a button:
<button (click)="add(name.value, phone.value, email.value);">
OK
</button>
But when I try it, the browser console says that phone is undefined, even when it is chosen and visible. When I delete the *ngIf statements, so that everything is visible, it works properly. What can I do?
Phone variable is undefined because when you set phone to false, #phone element is not rendered.
Hide rows instead of remove:
<tr [hidden]="!phone">
and
<tr [hidden]="phone">
*ngIf vs [hidden]
From angularjs official documentation:
Hiding an element is quite different from removing an element with
NgIf.
When you hide an element, that element and all of its descendents
remain in the DOM. All components for those elements stay in memory
and Angular may continue to check for changes. You could be holding
onto considerable computing resources and degrading performance, for
something the user can't see.
When NgIf is false, Angular removes the element and its descendents
from the DOM. It destroys their components, potentially freeing up
substantial resources, resulting in a more responsive user experience.
The show/hide technique is fine for a few elements with few children.
You should be wary when hiding large component trees; NgIf may be the
safer choice.
https://angular.io/guide/template-syntax#ngif
The issue lies in usePhone function. You are setting this.phone to boolean and are using it in html
as refrence to your input tag. You just need to change refrence variable name of the input tag like:
<td><input #phoneRef /></td>
And on click pass phoneRef.value:
<button (click)="add(name.value, phoneRef.value, email.value);">
We cant access variable inside *ngIf , you can use [hidden]
<tr [hidden]="!phone">
<td><label>phone</label></td>
<td><input #phone2 /></td>
</tr>
<tr [hidden]="phone">
<td><label>email</label></td>
<td><input #email /></td>
</tr>
Basically, I have a table with inputs inside a form tag, that are required by user to fill in.
When I test it, the form is working, but only when there is one row in a table. With two an more rows, a required attribute is not working.
I've written a simple example
This works, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
</table>
</form>
<br>
This doesn't work, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="surname" required>
</td>
</tr>
</table>
</form>
That's because forms with more than one text input aren't submitted by hitting enter. Try adding a submit button to both forms and you'll see it works fine.
In your example, is that supposed to be two identical fields in the different cells (and one of them is just misspelled)? If so, that's likely your problem. If they are intended to be two separate fields, it should work, but I'd need to see a more real-world example.
Also, I'd highly recommend using CSS to format/style your form. If that sounds intimidating, try Bootstrap--it makes creating pretty forms extremely easy.
I'm a HTML newbie and I'm completing a website where I'd put the login form to another website.
Basically I'd like to have two forms, one for the user and one for the password, of course, and a "fake" login buttom. Basically it'll switch to the real login page, fill the proper forms doing the real login.
Is it possible? Using Chrome I saw that the login page is something like this:
<form action="websitepath/home.xhtml" method="POST">
<input type="hidden" name="xwt.act" value="DO_LOGIN">
<table cellspacing="0" cellpadding="0" width="100%" class="m2">
<tbody>
<tr>
<td align="center" class="gray">
Username:
</td>
</tr>
<tr>
<td align="center">
<input type="text" size="15" id="username" name="xwt.usr">
</td>
</tr>
<tr>
<td align="center" class="gray">
Password:
</td>
</tr>
<tr>
<td align="center">
<input type="password" size="15" id="password" name="xwt.pwd">
</td>
</tr>
</tbody>
</table>
</form>
It's not possible to send the input directly into another form, but it should be possible (depending how the 2nd site handles login) to send the form directly from you to the original login form's action page.
Your form would should send the same inputs as the original form, and have the same action (websitepath/home.xhtml), with the full URL for the action.
Also - Autofill a form of another website and send it
You can post a form to another page quite easily with html+php
The basic gist of it is as follows:
Your Form On Site A
set the action to the target page and name your fields something logical
Site B
<?php
$variableOne = $_GET['fieldname'];
$variableTwo = $_GET['otherfieldname'];
?>
This is where it gets a little fuzzy on your intentions, you don't actually have to display another login page here, you can actually just push those values to your login script but if you absolutely want redundant login forms you can recreate the form on Site B and assign the field values to :
and it will grab the posted data for you again then you can drive your login form to whatever you normally do.
Hope this Helps
if you can't modify the other site then my above method wont work for you. Your only option would be to be create a form on Site A as follows
<form method="POST" action="http://remoteurl/websitepath/home.xhtml">
<input type="hidden" name="xwt.act" value="DO_LOGIN">
<input type="text" name="xwt.usr">
<input type="password" name="xwt.pwd">
</form>
This would in theory direct your login to the login script on the remote site.
I am trying to put a status image (showing a tick if email is correct or cross if not) next to the email field in my form.
The problem is my registration form is using the table method , so the image is not showing next to the field but below it. Can anyone help me out here?
This is what I tried to do but still not work the way I want it to.
<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
The issue is because the <td> has not enough space to fit in both text field and the image.
either add more width to the <table> or the 2nd <td> will solve the problem.
Since your image is of a check mark and an x, just use the unicode equivalents:
✔ = ✔
✘ = ✘
And simply get rid of the image altogether.
All it needs right now is space to fit in.
<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
Take a look at this fiddle, what changed is the size of the table containing the column. You may either reduce the input width or let it more space by increasing the table width.