|
|
Click an item for more info... |
|
|
|
PCHT Leeds - Websites, Databases, Spreadsheets & Training Customised solutions and software training for individuals and small businesses. |
|
javascript database interaction (page 2 of 6) |
||
 |
||
The web control has one goal, to gather some information from the webpage and send it to a javascript function whenever the visitor interacts with it, cuasing an event. The visitor must be able to influence what comes back from the database. So in this example we will use a list box. When the visitor chooses one of the items in the list, and clicks the button, the selection is gathered by a javascript function. In our example we will use a list of days. Tip: You don't actually *need* the button - you could simply use an onchange event rather than an onclick event. We prefer that the user must select the day and then click the button.
Here is the form using this HTML code... it has an ID of 'DayForm1'. The SELECT element has an id of 'DayList1' - these will change as we progress the project, so that we can demonstrate differences in the code.
.The form is linked to a javascript function called ShowEvents1 using the action attribute. This action fires when the button is clicked, provided the button is of type 'Submit'. Each day of the week has a value 1-7 and it is this value that is passed to the javascript function. Of course nothing will happen when the button is clicked, because we haven't written the javascript function yet... |
||
The javascript function has three goals. These are asynchronous (not occurring at the same time). The first goal is to send the value of the item selected in the web control to a php script. The second is to receive a response back from the php script which contains data from the database and populate the span tag before, thirdly, a message box is displayed with the span tag content. Javascript is a difficult language to code because it is difficult to debug when you make a mistake. Often, you are not given much of a clue as to what has gone wrong. It is very important, therefore, to build your code up slowly, and test it often. For testing, we recommend making use of alert boxes to check the value of variables. We will write the javascript function in stages (although there will not be that many lines of code in the completed function). It is conventional to put your javascript functions in the <HEAD> tags of your webpage, but you can put them anywhere on the page provided the functions are within <SCRIPT> tags. The function begins by gathering the value of the user's selection from the web control... ...There are a number of ways of getting the variable into the javascript function. Here we prefer to use GetElementbyID. There is no point proceeding until you are certain that the function has successfully gathered the value of the visitor's selection. If the visitor selects TUE you can test it using the alert, and if all is well you will get a message box displaying "2". If so, you can remove the alert, confident that the 'userresponse' variable has the correct value. This is good coding practise when writing javascript.
Here is the javascript function that runs when the Submit button is clicked....
...and here is the latest version of the form with the new javascript functionality linked to it. If you choose a day and click the button the javascript function will run, giving you an alert box. The alert box immediately tells you that there is a problem. The selected index always starts at 0. So if you choose the 2nd option in the list box (TUE), you are sending a value of '1' to the javascript function, when clearly you want to send '2'. In fact you really want to be sending the value of the option, and not its index. Consider that if you send the value then you can send text or dates to the javascript rather than a numerical index. The alertbox has proved helpful: we need to amend the javascript. Here is the revised form and javascript function.
There are a number of ways of coding this in javascript. Here we have put all the options into an array. Then we've asked for the value of the xth index. If you click the latest version of the form, below, the alert will display the value 1-7 rather than the index 0-6. Incidentally, if we wanted to pass MON-SUN instead, we would replace the 2nd line of the javascript with:
We will return to the javascript function after we have had a look at the database that we are querying. |
||
| Back | Next | Examples |
|
Home - about us- our services - news & events - contact us © Copyright PC Home Tuition Ltd. All Rights Reserved. Design by: Template Kingdom.com |
|
