I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
For example, for the form:
<form action="something.php" method="post">
<label for="uname">User Name</label>
<input type="text" id="uname"/>
<input type="image" src="go.gif"/>
</form>
When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
"The username must be at least 8 character long"
does anyone know how to do this? 4 1956
On May 8, 6:44*am, Ronald Raygun <inva...@domain.comwrote:
I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
For example, for the form:
<form action="something.php" method="post">
* *<label for="uname">User Name</label>
* *<input type="text" id="uname"/>
* *<input type="image" src="go.gif"/>
</form>
When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
"The username must be at least 8 character long"
does anyone know how to do this?
To answer your question:
<input type="text" id="uname" onfocus="alert('The username must be at
least 8 character long');"/>
I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:
<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif"/></td>
</tr>
</table>
</form>
Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:
<script type="text/javascript">
function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {
}
}
</script>
...
<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>
HTH...
On May 8, 7:38*am, Tom Cole <tco...@gmail.comwrote:
On May 8, 6:44*am, Ronald Raygun <inva...@domain.comwrote:
I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
For example, for the form:
<form action="something.php" method="post">
* *<label for="uname">User Name</label>
* *<input type="text" id="uname"/>
* *<input type="image" src="go.gif"/>
</form>
When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
"The username must be at least 8 character long"
does anyone know how to do this?
To answer your question:
<input type="text" id="uname" onfocus="alert('The username must be at
least 8 character long');"/>
I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:
<form action="something.php" method="post">
*<table>
* * * * <tr>
* * * * * * * * <td><label for="uname">User Name</label></td>
* * * * * * * * <td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * * <td><input type="image" src="go.gif"/></td>
* * * * </tr>
*</table>
</form>
Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:
<script type="text/javascript">
function checkDigits() {
* * * * var uname = document.getElementById("uname").value;
* * * * *if (uname.length == 8) {
* * * * * * *return true;
* * * * *}
* * * * *else {
* * * * *}
}
</script>
...
<form action="something.php" method="post">
*<table>
* * * * <tr>
* * * * * * * * <td><label for="uname">User Name</label></td>
* * * * * * * * <td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * * <td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
* * * * </tr>
*</table>
</form>
HTH...- Hide quoted text -
- Show quoted text -
Sorry, using Google Groups sucks beyond all belief...
<script type="text/javascript">
function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {
alert("Must be 8 characters.");
return false;
}
}
</script>
...
<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label
style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>
So now the alert only pops up when the don't follow instructions :)
HTH
Tom Cole wrote:
On May 8, 7:38 am, Tom Cole <tco...@gmail.comwrote:
>>On May 8, 6:44 am, Ronald Raygun <inva...@domain.comwrote:
>>>I have a form on an HTML page with the usual user name, email etc. I want to be able to display a popup window (callout?) when a text input control element is clicked.
>>>For example, for the form:
>>><form action="something.php" method="post"> <label for="uname">User Name</label> <input type="text" id="uname"/> <input type="image" src="go.gif"/> </form>
>>>When the user clicks in the user name fields, I want to display a callout (or popup window), with the text:
>>>"The username must be at least 8 character long"
>>>does anyone know how to do this?
To answer your question:
<input type="text" id="uname" onfocus="alert('The username must be at least 8 character long');"/>
I think you will find that this gets a bit tedious for the user. I would recommend just telling them right on the screen. Maybe something like:
<form action="something.php" method="post"> <table> <tr> <td><label for="uname">User Name</label></td> <td><input type="text" id="uname"/><br><label style="font-size: 8pt;">Must be 8 characters</label></td> <td><input type="image" src="go.gif"/></td> </tr> </table> </form>
Then, of course, you would perform some validation that 8 characters were actually entered before submitting. Maybe something like this:
<script type="text/javascript">
function checkDigits() { var uname = document.getElementById("uname").value; if (uname.length == 8) { return true; } else {
}
}
</script> ...
<form action="something.php" method="post"> <table> <tr> <td><label for="uname">User Name</label></td> <td><input type="text" id="uname"/><br><label style="font-size: 8pt;">Must be 8 characters</label></td> <td><input type="image" src="go.gif" onclick="return checkDigits();"/></td> </tr> </table> </form>
HTH...- Hide quoted text -
- Show quoted text -
Sorry, using Google Groups sucks beyond all belief...
<script type="text/javascript">
function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {
alert("Must be 8 characters.");
return false;
}
}
</script>
...
<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label
style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>
So now the alert only pops up when the don't follow instructions :)
HTH
Hi Tom, thanks for your response. I realized that I probably did not
state my question correctly/clearly. The behaviour I want is different
from that which you described. For one, I want to avoid using alert
boxes (at least in this scenario) - as I agree with you that they can be
very disuptive.
The behaviour I want, is to display a "hint" (like the kind you get when
you hover over a Microsoft Excel cell that has comments). So that when a
user clicks in the username cell, they have a "hint" that gives them
further info about the field, along with the opton to close the "hint".
A crude drawing of the kind of "hint" I want to display is shown below:
(--------------------------)
( Blah, blah, blah ... )
( ... )
( ______________________X )
\/
Where the X allows them to close the "hint" being displayed
HTH
On May 8, 7:57*am, Ronald Raygun <inva...@domain.comwrote:
Tom Cole wrote:
On May 8, 7:38 am, Tom Cole <tco...@gmail.comwrote:
>On May 8, 6:44 am, Ronald Raygun <inva...@domain.comwrote:
>>I have a form on an HTML page with the usual user name, email etc. I want to be able to display a popup window (callout?) when a text input control element is clicked.
>>For example, for the form:
>><form action="something.php" method="post"> * <label for="uname">User Name</label> * <input type="text" id="uname"/> * <input type="image" src="go.gif"/> </form>
>>When the user clicks in the user name fields, I want to display a callout (or popup window), with the text:
>>"The username must be at least 8 character long"
>>does anyone know how to do this?
>To answer your question:
><input type="text" id="uname" onfocus="alert('The username must beat least 8 character long');"/>
>I think you will find that this gets a bit tedious for the user. I would recommend just telling them right on the screen. Maybe something like:
><form action="something.php" method="post">
<table>
* * * *<tr>
* * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * *<td><input type="text" id="uname"/><br><label style="font-size: 8pt;">Must be 8 characters</label></td>
* * * * * * * *<td><input type="image" src="go.gif"/></td>
* * * *</tr>
</table> </form>
>Then, of course, you would perform some validation that 8 characters were actually entered before submitting. Maybe something like this:
><script type="text/javascript">
>function checkDigits() {
* * * *var uname = document.getElementById("uname").value;
* * * * if (uname.length == 8) {
* * * * * * return true;
* * * * }
* * * * else {
* * * * }
>}
></script> ...
><form action="something.php" method="post">
<table>
* * * *<tr>
* * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * *<td><input type="text" id="uname"/><br><label style="font-size: 8pt;">Must be 8 characters</label></td>
* * * * * * * *<td><input type="image" src="go.gif"onclick="return checkDigits();"/></td>
* * * *</tr>
</table> </form>
>HTH...- Hide quoted text -
>- Show quoted text -
Sorry, using Google Groups sucks beyond all belief...
*<script type="text/javascript">
*function checkDigits() {
* * * * *var uname = document.getElementById("uname").value;
* * * * * if (uname.length == 8) {
* * * * * * * return true;
* * * * * }
* * * * * else {
* * * * * * * alert("Must be 8 characters.");
* * * * * * * return false;
* * * * * }
*}
*</script>
*...
*<form action="something.php" method="post">
* <table>
* * * * *<tr>
* * * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * * *<td><input type="text" id="uname"/><br><label
style="font-size:
*8pt;">Must be 8 characters</label></td>
* * * * * * * * *<td><input type="image" src="go.gif" onclick="return
*checkDigits();"/></td>
* * * * *</tr>
* </table>
</form>
So now the alert only pops up when the don't follow instructions :)
HTH
Hi Tom, thanks for your response. I realized that I probably did not
state my question correctly/clearly. The behaviour I want is different
from that which you described. For one, I want to avoid using alert
boxes (at least in this scenario) - as I agree with you that they can be
very disuptive.
The behaviour I want, is to display a "hint" (like the kind you get when
you hover over a Microsoft Excel cell that has comments). So that when a
user clicks in the username cell, they have a "hint" that gives them
further info about the field, along with the opton to close the "hint".
A crude drawing of the kind of "hint" I want to display is shown below:
(--------------------------)
( Blah, blah, blah ... * * )
( ... * * * * * * * * * * *)
( *______________________X )
* \/
Where the X allows them to close the "hint" being displayed
HTH- Hide quoted text -
- Show quoted text -
I'm not sure I see the distinction between this and an alert box. They
both serve the same purpose, they make the user deal with a window
that they otherwis would not have to. If it's not the first time
they've been there, then they know this already, why make them search
for and click a button on a window (whether it's an alert box or a
pretty "comic book" styled window)? I personally feel that just
placing the statement unobtrusively within the form is a more user
friendly approach.
If this is the route you prefer, you could easily create a hidden div
with a transparent background and use your hint graphic as the
background. Then simply place it where you want it relative to input
field (style.top & style.left) and make id visible.
There are several threads here about just this sort of thing.
HTH. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Stephen Poley |
last post by:
I have quite often (as have probably many of you) come across HTML forms
with irritating bits of Javascript attached. The last straw on this
particular camel's back was a large form I was asked to...
|
by: Sue |
last post by:
After finishing up my first quarter JavaScript on 12/12/03, I decided
to improve character checking on my project. In my project I only had
to do very basic validation. Therefore, I only had one...
|
by: GIMME |
last post by:
Background ...
I've created a web application that allows a user to create an
HTML application from IE.
The application itself creates an XML representation of a XHTML
form. The XHTML...
|
by: avp |
last post by:
Hi,
We have an ASP.NET 2.0 (C#) application that has a web form with a
CheckBoxList control and a CustomValidator control. The CustomValidator
control is used to validate that at least one...
|
by: chrisdude911 |
last post by:
how do i add video into a javascript web page with my own custom
buttons?
|
by: Chris |
last post by:
Hi,
I have a form for uploading documents and inserting the data into a mysql
db. I would like to validate the form. I have tried a couple of Javascript
form validation functions, but it...
|
by: DolphinDB |
last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation.
Take...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
| |