Enhance the Inputs of Forms

(1)

Enhance the Inputs of Forms

Wen-Chang Cheng

Department of Management Information Science, Chung Hwa University of Medical Technology

Email: bill@mail.hwai.edu.tw

Abstract

The aim of the paper was discussed how to use web programming languages and dada base to improve the flexibility in input of Forms. Human need forms to interact with web pages. Web designers use Forms to create E-commerce to attract the visitors, gather information and take orders. There are two most commonly used types of inputs in Form, they are Text Fields and Selection Lists which tags are <input type=text> and <select> respectively. User has to do the typing work to input data onto the Text Field. It is agonizing for the users who have difficulty to type especially the elder person. Using mouse to click on the Selection List to select the item make the inputs become much easier. However the disadvantage of the Selection List is the items (options) were chosen previously by the web designer and some items may be lost or forgot to put in. We designed a combination of Text Field and Selection List implemented by JavaScript, PHP and SQL. Users can click on the Selection List to select the item or input the data by typing onto Text Field if no listed item is available for them to select. Most importantly, the maintainer of web site can easily update or add items from the web pages without modifying the codes.

Key words: Form, Text Field, Selection List, tag

1. Introduction

Form is a HTML element creating interaction between human and web pages such as member application, online survey, message etc. In E-commerce, customers make their orders by input data onto the Form and submit them to the online shop retailers. The Form provides many types of input and commonly used for the user to input an item or data are Text Field and Selection List. When online shoppers want to search a product brand, they may click on the Selection List to see if there is any item they want or just type the brand name onto Text Field and submit it to search. The web author has to design a Selection List and to put all the brands into the List. If the brand number is huge the List will be too long. We may divide the brands into several parts and create more Selection Lists that will cause the web page layout too complicate. To solve the problem, we use JavaScript and <iframe> tag to design a web page that users can input the data either from the Selection List or Text Field and maintainer can update the Selection List items easily and quickly. Al Fernandez[1] mentioned JavaScript and Form could enhance the online interactivity. Paul Kerry[2] used JavaScript to make the Form take on a variety of performance in web page design. Kazuhiro[3] and Flanagan[4] both described that JavaScript make the Form’s Submit action more creative and multi-functional. Luo[5] used JavaScript, ASP and Database to design a Online Computer Malfunction Report System. He made both the client and server pages more human by enhancing the Form by JavaScript. In “Library Management System” Cheng[6] also use JavaScript and PHP to design a more user-friendly interface. JavaScript is an object-oriented and decision-making language and allows author to ©2007 National Kaohsiung University of Applied Sciences, ISSN 1813-3851

(2)

control Form tags’ attributes and make it more flexibly designable. Gordon[7] defined a JavaScript-enhanced form was using event handlers such as onClick or onSubmit to invoke JavaScript action to access the attributes in the HTML Form tags. That will make the Form more flexible. Adding PHP and SQL make the maintainer of web site can easily update Form’s contents from the web pages without modifying the codes. For example, we can update the Selection List and save the list item into data base like MySQL.

2. Method

The common way that allows the user to enter the data both through Text Field and Selection List is use OnChange method provided by <select> tag. When user clicks on the item in the Selection List, item’s value will appear on the Text Field. The user can also input the data by typing onto the Text Field instead of choosing from Selection List. The Text Field’s value will send out while submit button is triggered. The code is shown on the (Table 1). Adding onChange to trigger getName() function, and replace value of depart(Text Field) by selectedIndex. The code of Table 1 is disadvantaged if the Selection List is too long the so as the code. To solve the drawback we simple add the PHP code to bring database into the Selection List. The modified code is expressed on Table 2.

Table 1. This code provides two ways to enter date from Text Filed and Selection List. While the code will be too long if the lists<option> are too many.

<form name=f method="POST" action="getdata.php" onSubmit="return CheckData();"> Department: <input type="text" name="depart" size="10">

<select size="1" name="Department" onChange="getName(this)"> <option value="">Department</option>

<option value="Sales">Sales</option>

<option value="Personnel">Personnel</option> <option value="Marketing">Marketing</option> </select>

(3)

Table 2. Add the PHP code to bring database into the Selection List<option> and the code will be short and easy to read. <script Language="JavaScript"></script>

<form name=f method="POST" action="getdata.php" onSubmit="return CheckData();"> Department: <input type="text" name="depart" size="10">

<select size="1" name="Department" onChange="getName(this)"> <option value="">Department</option>

<? $sql="SELECT * from depart order by departID"; $result=mysql_query($sql);

while ($row=mysql_fetch_row($result)) {

echo "<option value=$row[3]>$row[3]</option>"; } ?>

</select>

Above two methods are generally used when the Selection List is not too long. If there are hundreds of items in the Selection List, the above methods will not be acceptable both by the user and author. The following method could solve the problem by opening a sub-window. For example, we want to change the brand from Acer to HP (Fig. 1). We click “Select” button and a sub-window with brand items previously sorted by pages will pop up (Fig. 2). Use mouse to click on the brand item you want to change ex. HP, the Brand Text Field’s value will be replaced by HP (Fig. 3) and then click “Close” to close the sub-window. We also can manage the brand items by press the “Management” button to add, delete and update the items (Fig. 4).

Fig. 1. Main page. Click “Select” to open a sub-window.

(4)

Fig. 3. Brand Text Field’s value will be replaced by HP

Fig. 4. Update the items from the management web page.

Table 3. Code for main page Fig.1. <SCRIPT LANGUAGE="JavaScript">

var band ='<iframe src="brand.php" width="400" height="300" id="ir" ></iframe>'; if(document.all)

{

var content = ('<DIV ID="brand" STYLE="position:absolute; top: 10; left:500; width:300; height:150; background:#000000;">' + band +'</DIV>');

}

document.write(content); //Show Interface document.all.brand.style.visibility="hidden" ; function OpenItem()

{ document.all.brand.style.visibility="visible" ; } function CloseItem()

{ document.all.brand.style.visibility="hidden" ; } <input type="button" value="Select" onClick="OpenItem()"> <input type="button" value="Close" onClick="CloseItem()">

(5)

which includes a web page called brand.php. Page brand.php will allow the users to select the item they want to input. Secondly, a <div id=brand> tag was introduced to contain the <iframe>. The <div> tag’s visibility was initially set to hidden so the <iframe> and the brand.php page were also hidden at the beginning. Two functions (OpenItem and CloseItem) were engaged to open or close the <iframe> by changing the visibility to visible or hidden. Page brand.php was used to replace the Selection List. Using <a onclick=> tag to simulate the input in Selection List. The connection between brand.php and the main page was this code segment: “parent.document.myFORM.sBrand.value=eval('document.f.T'+n+'.value'.” which means the value of Text Field in main page was value of the item in brand.php

Table 4. Code for brand.php Fig. 2 <SCRIPT LANGUAGE="JavaScript"> var n; function show(n) { if(document.all) { parent.document.myFORM.sBrand.value=eval('document.f.T'+n+'.value'); parent.document.myFORM.sBrand1.value=eval('document.f.T'+n+'.value'); } } function CloseItem() { parent.document.all.brand.style.visibility="hidden" ; } </SCRIPT> <body bgcolor="#00FFFF">

<form name="f" method="POST" action="--WEBBOT-SELF--"> <?

require("db.php");

$rows=mysql_query("select * from brand"); $total=mysql_num_rows($rows);

$show=ceil($total/5); for ($i=1;$i<=$show;$i++) {

echo "<a href=brand.php?page=$i>Page $i</a>&nbsp&nbsp"; }

echo "<p>";

$page=$_GET["page"]; if (empty($page)) $page=1; $start=5*($page-1);

$sql="select * from brand limit $start,5"; $result=mysql_query($sql);

$n=1;

while($row=mysql_fetch_array($result)) {

(6)

echo "<input type=hidden name=T$n size=20 value=$row[0]>";

echo "<a href=# onClick=show($n)>$row[0]</a>     "; $n++;

}

mysql_free_result($result); ?> <p>

3. Discussion and results

These methods mentioned above all allow user to input the data by typing onto Text Field or Click on the items. Although code in Table 2 can solve the shortage of code in Table1, we won’t recommend adopting it if the number of item is too large. Code in Table 4 created a page contains many items which could be sorted through your desire. The page replaced the Selection List. Code in Table 3 introduced <div> tag and used JavaScript to control the visibility of <div>. That also make us can input the data by typing or clicking on the item. The last method described in Table 3 and Table 4 provides the best way to input the data into the Form. It is user-friendly and flexible because typing and clicking are both allowed. It’s also maintainable because the items are stored in database and are updatable. In some cases like huge inventories or various brands of product can apply the last method. In the future, we can make the most use of HTML, JavaScript, CSS, PHP and MySQL to find a better way based on the Table3 and Table4 to enhance the Form’s input.

References

[1] Al Fernandez,”Online Interactivity,”Encyclopedia of Educational Technology. SDSU, 2008. [2] Paul Kerry., “Web Page Design: Interactivity,” Encyclopedia of Educational Technology. SDSU. [3] Kazuhiro Furuhata 著、柯志杰譯, “最新 JavaScript 完整語法參考辭典,”博碩出版社, 2005。 [4] David Flanagan 著、陳建勳、黃吉霈編譯, “JavaScript 大全, ” 歐萊禮出版社, 2003。

[5] 羅逸文、郭曜瑋、鄭文昌、鄭瓊茹, ”線上電腦故障通報系統對維修系統之效率改善之研究,”華醫學報, 第 27 期, 第 121~130 頁, 2007。

[6] 鄭文昌、羅逸文、葉佳益、鄭瓊茹, ”系圖書管理系統之設計與建置-以華醫資管系為例,”華醫學報, 第 29 期, 第 99~131 頁, 2008。