Patent Publication Number: US-7716590-B1

Title: Method and apparatus for dynamically updating a secondary form element based on a selection in a primary form element

Description:
BACKGROUND 
   1. Field of the Invention 
   The present invention relates to web applications. More specifically, the present invention relates to a method and an apparatus for dynamically updating a secondary form element in a web browser based on a selection in a primary form element. 
   2. Related Art 
   The explosive growth of the Internet, including the increasing availability of broadband connections, has made the Internet an effective tool for commerce and information exchange. Many companies and organizations now routinely sell products and disseminate information online. In most cases, these tasks involve a user entering information into web-based form, and subsequently submitting the information to a server. Quite often, information placed in certain fields in these forms depends on information placed in other fields. For example, the selection of state in the state field might limit the choices available in a city field, or the selection of the date in a date field might limit the time slots available in a requested appointment time field. 
   The task of dynamically modifying content based on user inputs has commonly been dealt with in two ways. In one method, the web page is pre-loaded with all of the choices for the secondary form field for each possible corresponding choice in the primary form field. For example, in the application where a user is required to pick a state and a city, the web page is pre-loaded with all of the states and their corresponding cities. When the user subsequently makes a selection in the state form field, the city form field is dynamically configured from the data already preloaded into the web page at the client to include only the cities that are in the selected state. This method, however, results in longer page loading times and, consequently, increases bandwidth utilization. Moreover, it consumes more memory at the client. 
   The second major method for dynamic modification of content based on user inputs is by updating the entire page after the first selection is made. For example, when a user chooses a state in the state field, the contents of the state field is submitted to the server, and the server returns a new page that includes the list of cities in the city field that correspond to the selected state. This new page is subsequently presented to the user. This method also increases bandwidth utilization because the entire page has to be reloaded. In addition, the user is presented with a blank screen while the page refreshes, and this method does not allow a user to complete the form out of order, because until the state is selected, the city selection list remains empty. 
   What is needed is a method and an apparatus for dynamically modifying content of a web page based on user interaction that does not exhibit the limitations listed above. 
   SUMMARY 
   One embodiment of the present invention provides a system that facilitates updating a secondary form element in a web browser based on a selection of data in a primary form element. The system starts by receiving the selection of data in the primary form element in the web browser. Once the selection has been made, the system spawns a secondary instance of the web browser and sends the selection of data to a server from the secondary instance of the web browser. Next, the system receives a response from the server at the secondary instance of the web browser, which includes data for the secondary form element, wherein the data corresponds to the selection of data in the primary form element. The secondary instance of the web browser uses this data for the secondary form element to update the secondary form element in the web browser. 
   In a variation on this embodiment, the system spawns the secondary instance of the web browser in a minimized state and without focus, thereby hiding the secondary instance of the web browser from the user. 
   In a variation on this embodiment, updating the secondary form element further comprises creating a selection list in the secondary form element, thereby enabling a user to make a selection from the selection list in the secondary form element. 
   In a variation on this embodiment, the primary form element can be one of a checkbox, a textbox, a radio button, a drop-down list, and a button. 
   In a variation on this embodiment, the secondary form element can be one of a checkbox, a textbox, a radio button, a drop-down list, and a button. 
   In a variation on this embodiment, the task of spawning the secondary instance of the web browser is performed by a client-side script. 
   In a variation on this embodiment, once the secondary form element has been updated, the system closes the secondary instance of the web browser. 

   
     BRIEF DESCRIPTION OF THE FIGURES 
       FIG. 1  illustrates a computer network in accordance with an embodiment of the present invention. 
       FIG. 2  illustrates a web-based application in accordance with an embodiment of the present invention. 
       FIG. 3  presents a flowchart illustrating the process of dynamically updating form fields in accordance with an embodiment of the present invention. 
   

   DETAILED DESCRIPTION 
   The following description is presented to enable any person skilled in the art to make and use the invention, and is provided in the context of a particular application and its requirements. Various modifications to the disclosed embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other embodiments and applications without departing from the spirit and scope of the present invention. Thus, the present invention is not intended to be limited to the embodiments shown, but is to be accorded the widest scope consistent with the principles and features disclosed herein. 
   The data structures and code described in this detailed description are typically stored on a computer readable storage medium, which may be any device or medium that can store code and/or data for use by a computer system. This includes, but is not limited to, magnetic and optical storage devices such as disk drives, magnetic tape, CDs (compact discs) and DVDs (digital versatile discs or digital video discs. 
   Computer Network 
     FIG. 1  illustrates a computer network  100  in accordance with an embodiment of the present invention. Network  100  can generally include any type of wire or wireless communication channel capable of coupling together computing nodes. This includes, but is not limited to, a local area network, a wide area network, or a combination of networks. In one embodiment of the present invention, network  100  includes the Internet. 
   Client  102  and server  106  are coupled to network  100 . Client  102  can generally include any node on a network including computational capability and including a mechanism for communicating across the network. Server  106  can generally include any computational node including a mechanism for servicing requests from client  102  for computational and/or data storage resources. User  104  interacts with various applications distributed across network  100  through client  102 . 
   Web-Based Application 
     FIG. 2  illustrates a web-based application in accordance with an embodiment of the present invention. Client  102  contains parent web browser  200  and child web browser  202 . Parent web browser contains state selection field  204  and city selection field  206 . State selection field  204  and city selection field  206  are part of a distributed web application that is running on client  102  and server  106  across network  100 . In the embodiment of the present invention illustrated in  FIG. 2 , state selection field  204  and city selection field  206  are drop-down select boxes. Note that state selection field  204  and city selection field  206  can generally include any type of form field such as a checkbox, a textbox, a radio button, a drop-down list, or a button. 
   During operation, child web browser  202  is opened by a client-side script running in parent web browser  200 . Child web browser  202  sends the selection made in state selection field  204  to server  106 , and receives a list of cities to populate city selection field  206  in parent web browser  200 . Note that child web browser  202  is of zero size and is minimized without focus. Moreover, user  104  is unable to select child web browser  202 , and the actions of child web browser  202  are unperceivable to user  104 . Moreover, child web browser  202  closes upon updating city selection field  206 . 
   Process of Dynamically Updating Form Fields 
     FIG. 3  presents a flowchart illustrating the process of dynamically updating form fields in accordance with an embodiment of the present invention. The system starts by receiving a selection of a state in state selection field  204  in parent web browser  200  (step  302 ). When the state selection is made, the client-side script for the OnSelect event is invoked (step  304 ). This client-side script spawns child web browser  202  and loads child web browser  202  with dynamic update logic for updating city selection field  206  in parent web browser  200  (step  306 ). Note that child web browser  202  is of zero size and is minimized without focus. In this embodiment, user  104  is unable to select child web browser  202 , and the actions of child web browser  202  are unperceivable to user  104 . 
   Upon receiving the state selection from state selection field  204  and the dynamic update logic, child web browser  202  submits the state selection to server  106  via network  100  (step  308 ). In response to sending the selection, child web browser  202  receives a list of cities from server  106  that correspond to the state selected in state selection field  204  (step  310 ). Once this list of cities has been received, child web browser  202  uses the list of cities to update city selection field  206  in parent web browser  200  (step  312 ). At this point, the actions of child web browser  202  are complete, and consequently, child web browser  202  automatically closes (step  314 ). Note that this process can be recursively repeated. For example, upon selection of a city in city selection field  206 , this process can be repeated to populate a list of streets in a street selection field. 
   The foregoing descriptions of embodiments of the present invention have been presented for purposes of illustration and description only. They are not intended to be exhaustive or to limit the present invention to the forms disclosed. Accordingly, many modifications and variations will be apparent to practitioners skilled in the art. Additionally, the above disclosure is not intended to limit the present invention. The scope of the present invention is defined by the appended claims.