...

View Full Version : title, please!



joonstar
08-24-2004, 08:48 AM
<script language = "JavaScript" type = "text/javascript">

function validate(f) {
if (f.message.value.length == 0) {
alert("Message, please");
return false;
}
return true;
}

</script>


<form action="action.cfm" method="post" onsubmit="return validate(this);">

<input name="title" size="70"><br>

<textarea name="message"
cols="70"
rows="10"></textarea><br>

<input type="submit" value="Submit">

</form>



If a user clicks the submit button without entering any message,
an alert saying "message, please" will come with the code above.


I like to make an alert for the title, for example, "title, please" if the title box is empty.

How can I make the alert not only for message but also for title?

jamescover
08-24-2004, 09:30 AM
function validate(f) {

if (f['title'].value.length == 0) {
alert("Title, please");
return false;
}
if (f['message'].value.length == 0) {
alert("Message, please");
return false;
}



-james

Kor
08-24-2004, 10:04 AM
You missed a bracket:

function validate(f) {
if (f['title'].value.length == 0) {
alert("Title, please");
return false;
}
if (f['message'].value.length == 0) {
alert("Message, please");
return false;
}
return true;
}

And... Frankly, I would have used still the full reference to avoid possible missunderstandings
i.e.: f.elements['title'].value.length

joonstar
08-24-2004, 10:21 AM
f.elements['title'].value.length


would you rephrase the quote in plain English?

mcrilly
08-24-2004, 10:51 AM
He's basically saying (to my understanding) that instead of using



f.['title'].value.length


You use



f.elements['title'].value.length


I guess anyway. Maybe it's a more secure method.

Willy Duitt
08-24-2004, 11:03 AM
You are also looking for trouble by naming your input title.....

There is already a top level element by that name... document.title....

.....Willy

glenngv
08-24-2004, 11:51 AM
You are also looking for trouble by naming your input title.....

There is already a top level element by that name... document.title....

.....Willy
There will be no conflict if you use title as the input name.
The title property of document belongs to the document object while the other belongs to the elements collection. They are in a different level of document hierarchy.

document title -> document['title']
input named title -> document.forms[0].elements['title'] or document.forms['title']

jbot
08-24-2004, 01:05 PM
document.forms[0].elements['title'] or document.forms['title']

sorry to correct, you but they're not the same thing. the latter refers to a form named "title".

wot you really meant was document.forms[0]['title'] instead :)

Willy Duitt
08-24-2004, 02:09 PM
Aye, I understand the theory but I still do not think it is a good idea.... Particularly since I see many people simply reference element names without declaring the collection they may belong too... Whether that collection be forms, images or links.... I do not have the script handy, but I do recall running into trouble using title as a name.... But I may have used it for a variable name.... I forget, but I have had problems with this in the past....
.....Willy

jbot
08-24-2004, 03:02 PM
Aye, I understand the theory but I still do not think it is a good idea

it's definitely a best practice to avoid using names which are also used by other objects or properties. even when code is syntactically correct it isn't necessarily well-written or intelligble. anything leads to confusion in property assignment can't have the best naming convention to begin with.

hence it's best not to use "title" as an object name.

Kor
08-24-2004, 04:05 PM
I always thought that is a good practice to avoid reserved words for functions and even for names or ids...

Roy Sinclair
08-24-2004, 07:49 PM
Remember that IE pollutes the global namespace with every ID and every NAME so a form field named "title" is indeed going to conflict with (and override) the use of document.title for all users of that particular browser. While it should be in a different level of the browser heirarchy and thus quite ok for such use, IE will definitely mess that up.

I bring this up because we had a company wide template sent out for use on all web pages here but someone decided that label an image (used as a link, don't get me started on that one) with a <img name="forms" ...> which means that document.forms now points to that image instead of to the forms collection making the scripting of any forms on pages using that template (which is required, did I mention that?) much more difficult.

glenngv
08-25-2004, 07:20 AM
Remember that IE pollutes the global namespace with every ID and every NAME so a form field named "title" is indeed going to conflict with (and override) the use of document.title for all users of that particular browser. While it should be in a different level of the browser heirarchy and thus quite ok for such use, IE will definitely mess that up.

I fully agree that you should try to avoid using reserved words as variable names even though it would not conflict to avoid confusion.

My only point here is that using title as variable name will not conflict with document.title in IE. Although you can create a variable using document.myvariable (this technique is used in dreamweaver), you can only access it as that and not directly as myvariable except when it is called directly within an element. And I found in my test that ids or names of HTML controls such as textbox, textarea, ...etc are not treated as global variables, only ids of div, span and other non-control tags. Try testing this demo page in IE to see the result.


<html>
<head>
<title>This is the document title</title>
<script type="text/javascript">
document.myvariable="This is the content of document.myvariable";
function displayTitle(){
try{
alert(title.value);
}
catch(e){
alert("ERROR!\n"+e.message);
}
}
function displayMyVar(){
try{
alert(myvariable);
}
catch(e){
alert("ERROR!\n"+e.message);
}
}
</script>
</head>
<body>
<form>
<div id="mydiv" style="border:1px solid red">This is a div with id of 'mydiv'.</div>
<input type="text" name="title" id="title" value="This is a field with name and id of 'title'" size="50" /><br />
<input type="button" value="document.title" onclick="alert(document.title)" /><br />
<input type="button" value="document.myvariable" onclick="alert(document.myvariable)" /><br />
<input type="button" value="myvariable" onclick="displayMyVar();alert('2nd function call (myvariable directly accessed by button):\n'+myvariable)" /><br />
<input type="button" value="title.value" onclick="displayTitle()" /><br />
<input type="button" value="mydiv.innerHTML" onclick="alert(mydiv.innerHTML)" />
</form>
</body>
</html>

Kor
08-25-2004, 08:16 AM
Still I think it is wiser to avoid reserved words. Or use upper cased charcters and/or numbers

oTitle
sSelect
myForm
divX
id01

Willy Duitt
08-25-2004, 08:27 AM
FWIW: I remembered the script where I ran into trouble with using title....

In the below example I passed the image.title as an arguement (title) to the function and the document.title would show when this was used as the title of the new window... The solution was to change the arguement name from title to something else....



<BASE HREF="http://www.xs4all.be/~chadier/webgallery_1/">
<script type="text/javascript">
<!--//
function display(image,title){
var theImage = new Image();
theImage.src = image.replace(/thumbnails/i,'images');
theImage.onerror = function(){
alert('This image has failed to load!');
}

theImage.onload = function(){
var width = theImage.width; if(width <100) { width = 100 };
var height = theImage.height; if(height<100) { height = 100 };
var left = Math.round((screen.width - width) / 2);
var top = Math.round((screen.height - height) / 2);
var features = 'top='+top+',left='+left+',width='+width+',height='+height;
var openWindow = window.open('','display',features);
with(openWindow.document){
writeln('<html><head><title>'+title+'</title></head>');
writeln('<body onload="self.focus()" onblur="self.close()"');
writeln('style="background-image:url('+theImage.src+');');
writeln('background-repeat:no-repeat;width:'+width+';height:'+height+'">');
writeln('<div style="position:absolute;bottom:3px;text-align:center">');
writeln('<span style="font-size:12px;width:100%">');
writeln('<a href="javascript:self.close()">Close</a>');
writeln('</span></div></body></html>');
close();
}
}
return false;
}
//-->
</script>
</head>

<body>
<img src="thumbnails/17.jpg" width="55" height="70"
onclick="return display(this.src,this.title)"
style="cursor:pointer;cursor:hand;border:0"
title="Small Wrought Iron Table"
alt="Thumbnail Image">
<img src="thumbnails/18.jpg" width="55" height="70"
style="cursor:pointer;cursor:hand;border:0"
onclick="return display(this.src,this.title)"
title="Large Wrought Iron Table"
alt="Thumbnail Image">
<img src="thumbnails/19.jpg" width="55" height="70"
style="cursor:pointer;cursor:hand;border:0"
onclick="return display(this.src,this.title)"
title="Wrought Iron Sculpture"
alt="Thumbnail Image">


......Willy

glenngv
08-25-2004, 10:03 AM
FWIW: I remembered the script where I ran into trouble with using title....

In the below example I passed the image.title as an arguement (title) to the function and the document.title would show when this was used as the title of the new window... The solution was to change the arguement name from title to something else....
......Willy
That is another problem and the root of it is the use of the with statement.


with (openWindow.document){
writeln('<html><head><title>'+title+'</title></head>');
...
}

Because the with statement established openWindow.document as the default object, when it encounters title, it refers to the document's title property rather than the local variable title. The behavior is correct because Javascript first checks the default object to see if the variables inside the with statement exist as properties of that object; when it is not found, a local or global variable is used. The best solution in this case is not exactly to rename the argument variable title but to avoid using the with statement. Use var instead to store the reference to openWindow.document. I don't use the with statement as it also makes the execution slower than using complete reference. Here are some links that say with statement is bad.

Opera JavaScript Flaw--with Statement Problems (http://home.hiwaay.net/~taylorc/www/user-agents/opera/javascript-bugs/with-statement.html)
jslint (http://www.crockford.com/javascript/lint.html) (Scroll to With section somewhere in the middle section)



Still I think it is wiser to avoid reserved words. Or use upper cased charcters and/or numbers

I do too but...


I fully agree that you should try to avoid using reserved words as variable names even though it would not conflict to avoid confusion.

My only point here is that using title as variable name will not conflict with document.title in IE.

Willy Duitt
08-25-2004, 10:28 AM
That is another problem and the root of it is the use of the with statement.

Ah ha... That makes much sense....
Thanks for clearing that up for me.... :thumbsup:

One other off topic questions tho...
Is it true that the with statement has been deprecated??

I believe I read somewhere that it was, but I can not find the reference since Firefox decided to flush my Bookmarks.... :mad:

.....Willy

jbot
08-25-2004, 10:51 AM
Is it true that the with statement has been deprecated??

not according to
Devedge (http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/stmt.html#1004910)

liorean
08-25-2004, 11:28 AM
The with statement is not deprecated, no. It's considered bad style to use it though, for a number of reasons.

- with is a performance hog - you only gain performance if all identifiers inside the block are members of the argument sent to it.
- with is inconsistently implemented. Originally, with was not intended to work on left hand side expressions, just on right hand side expressions, which is an explanation for why Opera has that bug/feature/quirk.
In the method A situation it expands on the txtBox1 to the object you want - note that this is functionally a right hand side expression - and then accesses the value property of that, getting around the left hand side expression limitation. In the method B situation, it can't expand because value is a left hand side expression.
- with is unnecessary - using a variable is almost always preferable.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum