Author: excelence Paste Finishing Date: June 15, 2004
This article is not just about JavaScript, it's about JavaScript in Notes/domino!
Although it is said, it is worth a look!
Hope you get something!
Intimate contact with radio buttons, check boxes, and some interesting things with JavaScript
I'll start with the object model and some common objects, because everything in JavaScript is expanded from objects. Remember, this article is not just about JavaScript, it's about JavaScript in Notes/domino.
Window
The window is the top object of the object model. Usually, the window is your browser. If you have a frame structure in your window, each frame structure is a small window in turn, contained in the top-level window-the browser. I'll talk about frame structure in another article, now, let's look at a browser with only one Web page.
The window has its properties, such as its address (that is, its URL), the text on the status bar at the bottom of the browser, and so on; it also has methods, such as opening and closing. Generally speaking, because the window is at the top of the object hierarchy, JavaScript assumes that window already exists, you don't have to write it intentionally, which means "window.location" and "location" are the same.
The window is a Web page whose object hierarchy starts with the document. You can use Window.document to refer to it, or simply document it. There is only one document per window. Depending on your browser, the document has several options that vary. In MSIE, the document.all array contains all the objects in the document. In some versions of Netscape Navigator, you can access the Document.layers array. Each browser's interpretation of objects is different, but the table singular group (forms array) is accessible in all browsers.
In theory, each document contains at least one form (form), but it can contain multiple. However, in notes, unless you explicitly write the HTML code that is used to accomplish a particular function (which I never did), there is usually only one form. However, because you can have multiple forms, when you refer to a form, you still have to refer to the form through an array element, starting with the subscript 0. Unlike LotusScript, parentheses are used to enclose subscript numbers, such as Doc.companyname (0), and in JavaScript you will usually see the number of referenced array subscripts enclosed in square brackets. Therefore, you should refer to the form in the following way:
Window.document.forms[0];
or Jane writes:
Document.forms[0];
Strictly speaking, the above method is not the only way to refer to a form, and the following are legitimate expressions that refer to the form:
Document.forms[0];
Document.forms (0);
document.forms.0;
However, the way you often see it is with square brackets. Notice that I've added a semicolon at the end of each line of statements, which is one of the similarities between JavaScript and the language of the formula. You should add a semicolon at the end of each statement. Unlike the formula language, semicolons are not always required in JavaScript. Some browsers, compared to other browsers, can run JavaScript statements without semicolons, so even though you can sometimes use a semicolon, you'd better get into the habit of adding semicolons to each statement.
When you come into contact with the form, you are ready to visit the elements you care about most. A form is a container for fields, buttons, text, images, and other elements, and you will use JavaScript in the form to handle those elements.
A few simple elements
For LotusScript, one thing is worth mentioning: In addition to rich-text elements such as text, radio boxes, list boxes, check boxes, you can get their values in almost the same code. For example, if you have a "Location" field, regardless of its type, you can use the following LotusScript code to get its value:
Fieldvals = doc. Location
or so:
Fieldvals = doc. GetItemValue ("Location")
In LotusScript, the type of the field is not important for the code you want to value (an array of values). Unfortunately, this is not true for JavaScript. In JavaScript, different types of fields, in addition to displaying options (such as a radio box, check box, or text), are not like notes, they are different types of objects, each of which is referenced in a different way. In fact, that is not absolute, some objects are similar, but the reference process is not as smooth as in the LotusScript. You will find that you will spend a lot of time manually looking for domain (name) errors in your code to make them work correctly, which looks bad.
The first thing you need to know is that there is no such thing as a rich-text field in JavaScript, not in HTML. Notes provides a rich text Java (not JavaScript) applet that can be placed in a browser to get some rich text functionality, but you can't program it with JavaScript, and it's not really an HTML object type.
What's more surprising to notes developers is that there are no digital or time domains on the web. The fields of HTML are text-oriented. Although you can use them to collect digital information, such as quantity or unit price, the saved data is still text. To use it like a number, you have to convert it to a numeric type. I'll explain it in detail later. Now realize that everything is text, just like the information you entered in the Notes @prompt dialog box.
Figure 1
Create a form
In order to get a deeper understanding, you will do a little experiment with my help. Open Domino Designer, create a new form, create a button named "Get editable field value" and a text field named "CreatedBy" on the form, and set the default value for this field to @V3UserName (Figure 1).
If you use the R5 Designer (Designer), change the language of the trigger button to JavaScript. If you use the R6 Designer (Designer) As I do, you need to be a little bit more troublesome. In Notes/domino6 (ND6), you can use JavaScript in the Notes client as you would in a browser. More importantly, the same button can run different code on different clients. In Figure 2, you'll see some options, and you'll decide whether the code you write is running in notes ("client") or in the browser ("Web").
Figure 2
Figure 3
This feature is useful when you run different code in different environments, but what if you want to run the same code in both environments? Of course there is a better way than Copy button code, you can choose the common JavaScript in the right Drop-down list to write code for two environments simultaneously (Figure 3).
In this example, select "Common JavaScript."
In the button script, enter the code that prompts the user to createdby the field value. If you read the previous article, you know that you can use dots to separate the levels of elements in JavaScript. Your button script should look like the following:
Alert (document.forms[0). Createdby.value);
It should be noted that JavaScript is case-sensitive. This rule is not only valid for JavaScript elements (documents, forms, and so on) (lowercase), but also for domain names. What case effects you use in the domain must be reflected truthfully in your code. Experiment with the buttons in the browser [Design>preview in Web browser>internet Explorer (or your own browser)]. If you use Domino R6 's designer (Designer), you can experiment with the Notes client (Design>preview in notes).
Figure 4
If you're experimenting with a local database (which corresponds to the server), the user name you see in the browser is "Anonymous", not your name, but it is in the Notes client. The reason is that when you access the local database in the form of a Web page, you are not logged on to the server, and the browser doesn't know who you are. But in notes, whether local or server, you must log in to use the system. This is the subtle difference between the two types of clients.
Another difference is that there is no computational field on the web, but that doesn't mean you can't add a calculated field to your form. You can join the calculation field and the computed value will be displayed on the Web page unless the field is hidden. The key is that even though the domain is displayed there, HTML typically does not have domain defined. If you change the CreatedBy field to a computational field instead of editable, you'll see what I mean when you re testing, and you'll get a hint similar to Figure 4.
But when you run in the Notes client (R6), there is no error even in the computed domain. Frankly speaking, I have not yet judged whether this function is good or bad, but that is the result we have.
The error generated here is very important and you need to begin to understand the errors that are generated in JavaScript because it is very useful for debugging your code. Then when it prompts you that "Document.forms.0.createdby.value" is a null value or not an object, it means that you don't get the data you want.
When you return to the browser, right-click on the background and select "View Source", you will see the HTML code hidden under the Web page. When you simply browse the code, you see a reference to the button and the computed field, as follows:
<input type= button "onclick=" alert (document.forms[0). Createdby.value); "Value=" Get editable field value >
<p>created by:anonymous
When you make a page layout, your code may have fonts, paragraphs, or other tags that are mixed in the code of the button and the computed field. Those are formatted documents and can be skipped over in the discussion here. Note that "Anonymous" is another word on the form that does not have any markings on either side to prompt you that it is generated from the domain. In the source code, anonymous and "Created by" do not make any difference: two static text in front of the field (if you are already logged in, you will see your name instead of the anonymous).
To compare, change the CreatedBy field back to editable text, save the form, go back to the browser and refresh the page, and then look at the page's source file, as follows:
<input type= button "onclick=" alert (document.forms[0). Createdby.value); "Value=" Get editable field value >
<p>created by:<input name= "CreatedBy" value= "Anonymous" >
Instead of the word anonymous (or your name) is the field's HTML code (or, strictly speaking, an HTML text entry box). Its name is "CreatedBy" and the value is "Anonymous". These are properties that can be obtained through JavaScript, but ordinary text does not have these attributes. So you can't use JavaScript to refer to compute fields, at least in browsers. It is also confusing that when a document is not edited, it cannot be referenced using JavaScript, even editable fields. In other words, when you save the document and open it again, but don't set it to edit mode, the HTML code for the page will be the same as the CreatedBy field when the domain is computed. Another interesting thing about JavaScript is that we don't have a lot of opportunities to deal with the edit and non-edit status of the form outside of Domino, which is a big problem for our domino developers.
Do you notice that both the button and the field are converted into input objects? That's how HTML works. The confusing thing is that two objects have the property of value. For the button, value is "Get editable field value", which I think should be the label of the button, but the value of the field is its actual value. Some other types of objects have both the Value property and the Text property. If you are like me, then you sometimes can't figure out what it is! The easiest way to talk about my experience is to read the HTML code for the Web page.
Multi-valued
The HTML domain does not have a multi-valued attribute like the notes domain. You can try this: Add a second button and a second field to the form. Name the domain "letters", the type is editable text, and the Allow multivalued (Allow multiple values) check box is selected. Write the default values in the following alphabetical list:
"A": "B": "C": "D": "E": "F": "G"
Name the button "Get Multiple Values" and type the following JavaScript code:
Alert (document.forms[0). Letters.value);
You can change the value of this field with a different delimiter, but when you click the button, you notice that no matter what delimiter you use, you are always prompted for all values of the field. This contrasts with the @formulas and LotusScript that are running in the Notes client. With @prompt, the hint you get is just the first value of the field: "A". You can also display only one value with LotusScript, but you will get an error if you want to specify an array subscript. Neither the formula nor the LotusScript can get all the values of the multivalued range in the prompt statement.
The reason is that in the notes language, there are indeed multiple values in the domain. For HTML and JavaScript, there is only one value. Once again, look at the source code for the Web page and you'll find something similar to the following:
<input name= "Letters" value= "A; B C;d; E F G ">
Note that its value is a delimited value that is caused by a "pair" of double quotes. There will be a detailed discussion of how separate values are separated, but now you should be aware that multivalued values are not exactly multi-valued on the web (at least for text entry boxes). The processing of other types of fields and text fields will be different.
radio button
Another interesting place is the radio button, which, in Notes and Web pages, is a single field with multiple values on the Web, an array of input text boxes with the same name. To understand the foregoing, consider the following example:
On the form, add another new field, named "Radiobuttn". Like its name, change it to a field of a single marquee type. In the second tab of the Domain Properties window, enter the following options and aliases (Figure 5):
Figure 5
One | A
Two | B
Three | C
Four | D
Set the default value of this field to the alias of the first option, which is the quoted letter "A". Now that you preview the form in your browser and look at the source file, you'll see that the radio button's code is very different from the code in the normal field. The HTML code looks similar to the following:
<input type= "Radio" name= "RADIOBUTTN" value= "A" checked>one<br>
<input type= "Radio" name= "RADIOBUTTN" value= "B" >Two<br>
<input type= "Radio" name= "RADIOBUTTN" value= "C" >Three<br>
<input type= "Radio" name= "RADIOBUTTN" value= "D" >four
Here you should pay attention to some important points. First, all 4 radio button objects have the same name: RADIOBUTTN, so that HTML and JavaScript know that they are objects in the same array. Second, the value of each option is an alias for the option, not the text you see (such as "one," "two," and so on). This is the same as the alias stored in notes, not the text you see (of course, if there is no alias, the value saved is the same as the text). Finally, you select the first option by using the word "checked" in the HTML statement, which is added to the statement of the first radio button.
If you add another button and use the same method as the other two field values to fetch the RADIOBUTTN value, you get a strange error, which is the following code:
Alert (document.forms[0). Radiobuttn.value);
You will see an error dialog box that prompts "undefined" (Figure 6).
Figure 6
The problem here is not that there is no value defined for it. After all, as shown above, there are 4 values in the radio button's code. In other words, the problem is radiobuttn itself, at least the one now used here. The radio button is an array of input options, and if you want to know the value of one of the elements, you must specify which one to try the following code:
Alert (document.forms[0). Radiobuttn[0].value);
OK, return the value "a" for the current field, but when you click the button when you choose another option, you get the "a" instead of the value you choose, or it's not good.
To get the value of the selected option, you first need to know which option is selected, and then in the alert statement, use the subscript value of the selected option to correctly reference the value of the current option. That is, if the first option is selected, you should take radiobuttn[0].value, and if the second option is selected, you should take radiobuttn[1].value, and so on.
In JavaScript, some types of fields have SelectedIndex properties that represent the array subscript values for the currently selected option. The radio buttons, however, are not so fortunate, and the check boxes do not escape doom. To get the value of the currently selected radio button, you must look for the "checked" attribute in the RADIOBUTTN array element. Compared to LotusScript, LotusScript can take the same value as other types of fields to get the radio button currently selected. It's a very troublesome thing, but it's just like that.
The following is the code for the button:
var doc = document.forms[0];
for (i = 0; i <
Doc. Radiobuttn.length; i++) {
if (Doc. radiobuttn.checked) {
Alert (Doc. Radiobuttn.value);
Break
}
}
There are a few new concepts coming up here, so let me take a moment to explain. First, if you read the previous article, you will know that "Var" is used in JavaScript to declare variables or assign values to variables, just like "Dim" and "Set" in LotusScript. In this way, in order to avoid typing document.forms[0 again and again, I will assign document.forms[0] to the variable doc for later use:
var doc = document.forms[0];
The following is a loop, and the loop body does not have code in the following way:
for (i = 0; i < Doc. Radiobuttn.length; i++) {
}
Aren't you a little dazzled? I used to Ching every time I saw a code like this, but it wasn't as bad as it looked. First, the curly braces are only used to contain the loop body. JavaScript for loops have three options:
1. Count variable and its initial value (i=0);
2. How to know to continue the cycle (I < Doc. Radiobuttn.length);
3. How to accumulate count variables (i++).
The first is i=0, very simple, I use the variable i and its initial value is 0.
Part II: I<doc. Radiobuttn.length, it can be a bit less intuitive. The length property of JavaScript has a different use environment, if you want to check the length of a normal text field, such as the CreatedBy field on the form (Document.forms[0]. Createdby.length), you will find that length is the number of characters in the text in the field. For example, Anonymous,length is 9. For arrays, such as RADIOBUTTN arrays, length is the number of elements in the array. Unlike the array subscript starting at 0, length starts at 1. Therefore, if the last element of the RADIOBUTTN array is 3,length, the value is 4. In the loop, I let I start counting loops from 0 until it is less than 4. Therefore, the loop body loops 4 times, the value of I is 0,1,2,3, ending with the subscript of the last element of the array (I confess a bit of confusion).
The third parameter in the loop body: i++ is a low-level error for lotusscript developers. This is shorthand in JavaScript, and the i++ value is the same as the i=i+1 value. In fact, you can use any of two forms in a loop, so the following is equivalent to the above:
for (i = 0; i < Doc. Radiobuttn.length; i = i + 1) {
}
I=i+1 also works, but the problem is that no one does that because you get used to i++, it's shorter and simpler. The value of it is that you can also write i--, and I=i-1 is the same, of course, in this cycle it can not run. With i++ you can do a lot of things that look interesting, but that's the future.
Again, loop: Three parameters are separated by semicolons and surrounded by parentheses, the loop body code is surrounded by curly braces, and the loop body is an IF statement:
if (Doc. radiobuttn.checked) {
}
Here the statement of true and false is also surrounded by parentheses. The doc in the trial. Radiobuttn.checked does not seem to provide enough information, but it forms a shorthand for JavaScript with loops. What if you use the LotusScript way? I will first check the current RadioButton element is not equal to checked, like the following way:
Doc. Radiobutton[0] = "Checked"
Because checked is a property and not a value, the above code does not run correctly. You will also notice that it is not enclosed in quotes in HTML. In fact, checked is a kind of "yes" or "no" thing. To be more precise, it is not true or false, so the IF statement means: If the element of RADIOBUTTN is checked (selected), that is: true, then do the following ... The experiment here looks a little strange because there is no mention of true or false. If that makes you feel uncomfortable, you can also easily write the IF statement like this:
if (Doc. radiobuttn.checked = = True) {
}
Note that the true here is all lowercase and has two equal signs. Unlike in LotusScript, the equals sign (=) in JavaScript is used to assign a value to something else:
var doc = document.forms[0];
To compare two items for equality, you must use two equal signs. In my mind, I think it means: Doc. Radiobuttn.checked equals True, so help me remember to use the two equals sign. Double sign tags also apply to & symbols (use one to append or concatenate characters, and two to represent "and", such as using two criteria in an if statement).
Finally, in the IF statement is an alert statement followed by a break. The break is the exit for in JavaScript. It terminates the loop because one radio button can only have one option selected.
If you put all the code into a button, you'll see that whatever option you choose for the radio button, clicking the button will correctly display the value of the option. It's great, and now you're getting started with JavaScript.
check box
check boxes and radio buttons are similar. On the form, copy the radio button field and change the name to "CHECKBX", changing the type of the field to checkbox, saving the form, refreshing the Web page, and viewing the source file. You'll see that the check box's HTML code is almost exactly the same as RADIOBUTTN's:
<input type= "checkbox" Name= "CHECKBX" value= "A" checked>one<br>
<input type= "checkbox" Name= "CHECKBX" value= "B" >Two<br>
<input type= "checkbox" Name= "CHECKBX" value= "C" >Three<br>
<input type= "checkbox" Name= "CHECKBX" value= "D" >four
The real difference is not the domain name, but the type is the check box, not the radio button. The other difference is that you can select multiple values in the checkbox, although you also need to traverse the entire check box like the radio button to determine which option is selected, but you cannot stop the traversal until you have checked it all out. The code you use to check the check box in the button looks like the following:
var doc = document.forms[0];
for (i = 0; i < Doc. Checkbx.length; i++) {
if (Doc. checkbx.checked) {
Alert (Doc. Checkbx.value);
}
}
I'm sure you've got more or less familiar with the code so far, because it's basically the same as the radio button, except that the domain name changes and the "bread" statement is removed. In a practical program, the code does more work than I do, but first I hope you're comfortable with the basics.
Wait for more objects
There are several types of domains you need to know, each with its own characteristics, but that is the material for another article. Now, you may want to use your own experiments to familiarize yourself with the examples here. You may also want to add more fields to the form that I haven't covered, and look at their HTML source files, which is our next start, goodbye.
Reference Resources
This digest is from 2003.6 "Lotus Magazine Simplified Chinese edition": "Lotus Magazine Simplified Chinese version" as the first domestic focus on IBM Lotus Technology publications, its content mainly from the U.S. Lotus related top technical publications, For the broad Lotus management and development staff, to show you the latest cutting-edge Lotus-related technology. Welcome to apply for a complimentary.
Lotus Related Topics: If you are a developer interested in Lotus and want to learn more about the Lotus product family and how Lotus products work together with other IBM products, how does lotus support open standards in industries such as XML, Web services, etc. How to use Lotus for the development of Java EE, immediately visit the IBM developerWorks China website Lotus Related topics. Here, we have carefully collected the relevant articles, tutorials, Red Book, I believe that your development will be helpful.
Questions about active Drop-down list boxes and fuzzy queries
I want to enter some text in the Drop-down list box, and then the results from the fuzzy query in the datasheet class will be shown in the dropdown, write the following code, but <select> do not let themselves input content, ask the experts how to solve? <% Dim Tianjian
%>
<script language = "JAVAscript" >
var Onecount;
coecount=0;
function Changelocation (LocationID)
{
var Locationid=this.classid.text;
Tiaojian=locationid;
<%
strconnstring = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" & Server.MapPath ("Database/bgxt.mdb")
Set db = Server.CreateObject ("ADODB.") Connection ")
Db.open strconnstring
Set rs= Server.CreateObject ("ADODB.") Recordset ")
Sql= "SELECT * from class where nclass like '" &tiaojian& ""
Rs.Open sql,db,1,1
Count=0
Do as not rs.eof
%>
Subcat[<%=count%>]=new Array ("<%=trim (RS (" nclass))%> "," <%= Trim (rs ("ClassID"))%> "," <%= trim (RS ("Nclassid"))%> ");
<% Rs.movenext
Loop
Rs.close
%>
onecount=<%=count%>;
document.myfrom.classid.length=0;
var Locationid=locationid;
var i;
for (i=0;i<onecount;i++)
{
Document.myform.classid.options[document.myform.classid.length]=new option (subcat[i][0],subcat[i][1]);
document.myform.classid.length=documen.myform.classid.lenght+1;
}
</script>
<form name= "MyForm" method= "post" action= "temp1.asp" >
<table width= "75%" border= "1" >
<tr>
<TD width= "55%" ><div align= "center" >
<select name= "ClassID" size= "1" onchange=changelocation (this) >
</select> </div></td>
</tr>
</table>
