September 18, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Reading Data from Web Pages: Buttons and Text Fields

  • February 20, 2003
  • By Sams Publishing
  • Send Email »
  • More Articles »

Using Buttons

Besides submit buttons, you can use standard HTML buttons with JSP. Here's an example that uses three standard buttons. When the user clicks one of the buttons, our JSP code will indicate what button was clicked.

This example works using some JavaScript in the browser (we'll take a more in-depth look at using JavaScript with JSP in Day 21, "Client-Side Programming and Deploying Your Projects"). When the user clicks a button, a JavaScript function is called that sets a hidden field with the name of the button clicked (such as Button 1), and then submits the form using the JavaScript submit method. You can see what the code looks like in Listing 4.14.

Listing 4.14 Using Buttons

<HTML>
  <HEAD>
    <TITLE>Using Buttons</TITLE>
  </HEAD>

  <BODY>
    <H1>Using Buttons</H1>
    <FORM NAME="form1" ACTION="ch04_15.jsp" METHOD="POST">
      <INPUT TYPE="HIDDEN" NAME="buttonName">
      <INPUT TYPE="BUTTON" VALUE="Button 1" ONCLICK="button1()">
      <INPUT TYPE="BUTTON" VALUE="Button 2" ONCLICK="button2()">
      <INPUT TYPE="BUTTON" VALUE="Button 3" ONCLICK="button3()">
    </FORM>

    <SCRIPT LANGUAGE="JavaScript">
      <!--
        function button1()
        {
          document.form1.buttonName.value = "button 1"
          form1.submit()
        } 
        function button2()
        {
          document.form1.buttonName.value = "button 2"
          form1.submit()
        } 
        function button3()
        {
          document.form1.buttonName.value = "button 3"
          form1.submit()
        } 
      // -->
    </SCRIPT>
  </BODY>
</HTML>

You can see this page in Figure 4.13.


Figure 4.13

Using standard buttons.

In the JSP code, all you need to do is recover the name of the button that was clicked from the hidden control and display it, as you see in Listing 4.15.

Listing 4.15 Determining Which Button Was Clicked

<HTML>
  <HEAD>
    <TITLE>Determining Which Button Was Clicked</TITLE>
  </HEAD>

  <BODY>
    <H1>Determining Which Button Was Clicked</H1>
    You clicked
    <%= request.getParameter("buttonName") %>
  </BODY>
</HTML>

You can see the results in Figure 4.14, where, with a little help from hidden controls and JavaScript, we see that Button 2 was clicked. That's one way of handling multiple buttons—stay tuned for a few more.


Figure 4.14

Determining which button was clicked.

JSP to JSP—Navigating Directly to JSP Pages

So far today, we've used HTML pages that you navigate to first, and JSP pages to handle input from those HTML pages. In other words, we've used introductory HTML pages to give users access to our JSP pages.

However, it's important to realize that you can navigate directly to JSP pages, even when you're sending data to those pages. When you open the JSP page for the first time, you're not sending any data from HTML controls to that page, so request.getParameter("controlName") will return the Java value null, where controlName is a control in your page whose data you want. You can use this fact to determine whether there's any data sent to you from HTML controls, and if not, simply display an introductory Web page the way you want the users to see it before they've entered any data.

For instance, you can rewrite the previous example, putting everything into one JSP page—if the user has clicked a button, you can indicate what button was clicked; otherwise, you can just display the buttons, as you see in Listing 4.16.

Listing 4.16 Using Buttons

<HTML>
  <HEAD>
    <TITLE>Using Buttons</TITLE>
  </HEAD>

  <BODY>
    <%
      if(request.getParameter("buttonName") != null) {
    %>
      You clicked
      <%= request.getParameter("buttonName") %>
    <%
      }
    %>

    <FORM NAME="form1" METHOD="POST">
      <INPUT TYPE="HIDDEN" NAME="buttonName">
      <INPUT TYPE="BUTTON" VALUE="Button 1" ONCLICK="button1()">
      <INPUT TYPE="BUTTON" VALUE="Button 2" ONCLICK="button2()">
      <INPUT TYPE="BUTTON" VALUE="Button 3" ONCLICK="button3()">
    </FORM>

    <SCRIPT LANGUAGE="JavaScript">
      <!--
      function button1()
      {
        document.form1.buttonName.value = "button 1"
        form1.submit()
      } 
      function button2()
      {
        document.form1.buttonName.value = "button 2"
        form1.submit()
      } 
      function button3()
      {
        document.form1.buttonName.value = "button 3"
        form1.submit()
      } 
      // -->
    </SCRIPT>
  </BODY>
</HTML>

To see how this works, you can navigate to http://localhost:8080/ch04/ch04_16.jsp, click a button, and you'll see the results in Figure 4.15. Everything is handled by that one JSP page—no introductory HTML page is needed.


Figure 4.15

Using a literal in Java.

Note that there are times when the data in HTML controls might actually return a value of null when you use getParameter, so here's a more general way of testing if data was sent to you—you can use the request object's getParameterNames method (that we'll see tomorrow), which returns the names of the HTML controls that sent you data. If this method returns null, it's a sure bet that there's no data waiting for you to process:

if(request.getParameterNames() != null) {
  //Process data from HTML controls
}
else {
  //Display introductory Web page
}

In this example, we've been handling multiple buttons in a form with the aid of JavaScript. But this isn't a book on JavaScript, it's a book on JSP. Isn't there a way to handle multiple buttons just using JSP? There is—you can use multiple HTML forms.

Using Multiple Forms

A single Web page can support multiple HTML forms, and that's often useful. For example, one way to support multiple buttons in a Web page is to make them all submit buttons and place them each in their own form. When the user clicks a button, that form's data is sent to the server. To distinguish between the various forms, you can give each form a hidden control with identifying text that you can read in your JSP code.

For example, you can see how to support three different buttons in three different forms in Listing 4.17, where each form contains hidden text holding the button's name. When the user clicks a button, our code can display the clicked button's name using that hidden text.

Listing 4.17 Using Multiple Forms

<HTML>
  <HEAD>
    <TITLE>Using Multiple Forms</TITLE>
  </HEAD>

  <BODY>
    <H1>Using Multiple Forms</H1>
    <%
      if(request.getParameter("buttonName") != null) {
    %>
      You clicked
      <%= request.getParameter("buttonName") %>
    <%
      }
    %>

    <FORM NAME="form1" METHOD="POST">
      <INPUT TYPE="HIDDEN" NAME="buttonName" VALUE="button 1">
      <INPUT TYPE="SUBMIT" VALUE="Button 1">
    </FORM>

    <FORM NAME="form2" METHOD="POST">
      <INPUT TYPE="HIDDEN" NAME="buttonName" VALUE="button 2">
      <INPUT TYPE="SUBMIT" VALUE="Button 2">
    </FORM>

    <FORM NAME="form3" METHOD="POST">
      <INPUT TYPE="HIDDEN" NAME="buttonName" VALUE="button 3">
      <INPUT TYPE="SUBMIT" VALUE="Button 3">
    </FORM>
  </BODY>
</HTML>

You can see the results in Figure 4.16.


Figure 4.16

Supporting multiple forms.

In fact, there's an easier way to do this. Submit buttons are HTML controls like any other, which means you can read the text in their VALUE attributes—that is, their captions—using getParameter. If you give each submit button the same name but different captions, you can read those captions in our JSP code to determine what button was clicked, as you see in Listing 4.18.

Listing 4.18 Using Multiple Forms Using Buttons with Multiple Names

<HTML>
  <HEAD>
    <TITLE>Using Multiple Forms</TITLE>
  </HEAD>

  <BODY>
    <H1>Using Multiple Forms</H1>
    <%
      if(request.getParameter("submit") != null) {
    %>
      You clicked
      <%= request.getParameter("submit") %>
    <%
      }
    %>

    <FORM NAME="form1" METHOD="POST">
      <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Button 1">
    </FORM>

    <FORM NAME="form2" METHOD="POST">
      <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Button 2">
    </FORM>

    <FORM NAME="form3" METHOD="POST">
      <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Button 3">
    </FORM>
  </BODY>
</HTML>

You see the results in Figure 4.17, where, thanks to multiple HTML forms, we see that Button 3 was clicked.


Figure 4.17

Using multiple HTML forms with buttons with different names.

Summary

You've seen quite a lot today. You've gotten started using HTML controls in Web pages and reading data from those HTML controls in JSP code.

You've learned how to use the various attributes of the <FORM> element to tailor your HTML forms as you want them, and to send the data in the form's controls back to the server. You use submit buttons to actually send that data to the URL given in the form's ACTION attribute.

You can decipher the data sent to you in your JSP code using the request object, and you learned the methods of that object today. The method we focused on today was the getParameter method, which lets you read the data from various controls.

The controls you've seen today included submit buttons, text fields, text areas, password controls, hidden controls, standard buttons, and reset buttons. You can handle all these controls with the getParameter method.

You also learned how to use multiple forms, and how you can use them to support multiple buttons in the same Web page. And we got a little tricky by storing form data in hidden controls, both with and without the help of JavaScript.

Tomorrow, we'll continue our work with HTML controls as we turn to the other controls that are available, from check boxes to select controls.

Q&A

  1. What if a control can return multiple values, such as a multivalue select control? I can't use getParameter in such a case.

  2. There are other methods you use instead—See the topic "Using Multiple-Selection Select Controls" in Day 5.

  1. Can I use the request object in secure channels such as HTTPS?

  2. Yes. One handy method if you're using a secure channel is the request object's isSecure method, which returns true if this request was made using a secure channel, such as HTTPS, and false otherwise.

Workshop

This workshop tests whether you understand all the concepts you learned today. It's a good idea to master today's concepts by honing your knowledge here before starting tomorrow's material. You can find the answers to the quiz questions in Appendix A.

Quiz

  1. What attribute of the <FORM> element do you use to specify where to send the form data?

  2. What's the difference between the GET and POST methods?

  3. Name two controls that can submit a form's data back to the server.

  4. What Java class is the request object an object of?

  5. Which method can you use to determine what browser the user has?

Exercises

  1. Give this one a try—just read the text that the user has entered into a password control and return it in a text field. Doing so will give you practice in handling both reading and sending data using HTML controls.

  2. Following the example in the topic "Using Request Objects" today, use the request.getHeader("User-Agent") method to check what browser the user has. If the user is using Internet Explorer, display a greeting using the <MARQUEE> element; otherwise, use the <H1> element.


About the Author

Steven Holzner is the author of more than 70 books on programming, and has been writing on Java topics ever since Java has been around. His books have sold more than 1.5 million copies and have been translated into 16 languages around the world. He has a Ph.D. from Cornell University, has been on the faculty of both Cornell and MIT, and is a former contributing editor to PC Magazine. He's long used JSP in commercial environments, and specializes in Web development.

Source of this material

This material is from Chapter 4, Reading Data from Web Pages: Buttons and Text Fields, from the book Sams Teach Yourself JavaServer Pages in 21 Days (ISBN: 0-672-32449-0) written by Steven Holzner, published by Sams Publishing.

To access the full Table of Contents for the book


Other Chapters from Sams Publishing:

Web Services and Flows (WSFL)
Overview of JXTA
Introduction to EJBs
Processing Speech with Java
P2P Dynamic Networks






Page 4 of 4



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel