1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2:"http://www.w3.org/TR/html4/loose.dtd">
3:<html>
4:<head>
5: <title>JQuery Form with Simple Buttons</title>
6: <link href="/bluesky.css" rel="stylesheet" type="text/css"></link>
7: <script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
8: <script type="text/javascript">
9:
10:
11: $(document).ready(function() {
12: // do stuff when DOM is ready
13:
14: $("#Submit").click(function(){
15: $("#firstTarget").html($("#firstName").val());
16: $("#lastTarget").html($("#lastName").val());
17: $("#zipTarget").html($("#zipFld").val());
18: });
19:
20: $("#Reset").click(function(){
21: $("form#simpleForm")[0].reset();
22: });
23:
24: $("#simpleForm").submit(function(){
25: return false;
26: });
27:
28: });
29: </script>
30:</head>
31:<body>
32:<?php include($_SERVER['DOCUMENT_ROOT'] . "/in/hdrex.php") ?>
33:
34:<!-- Page Content -->
35: <div class="formBox">
36: <h3>JQuery Form with Simple Buttons</h3>
37: <p>This page provides a simple example of using JQuery with a form. The example shows how to:</p>
38: <ul>
39: <li>Retrieve a value from a form field using the <code>val()</code> function.</li>
40: <li>Use the <code>html()</code> function to write HTML inside an element.</li>
41: <li>Assign <code>click</code> event handlers to the <code>Submit</code> and <code>Reset</code> buttons.</li>
42: </ul>
43: <p><a href="javascript:void(window.open('view-source:'+document.location, '_blank'))">View Source</a></p>
44: <hr/>
45:
46: <h4>Simple Form</h4>
47: <form id="simpleForm">
48: <label>First name: </label><input type="text" size="25" maxlength="25" id="firstName" name="firstName" />
49: <br/>
50: <label>Last name: </label><input type="text" size="25" maxlength="25" id="lastName" name="lastName" />
51: <br/>
52: <label>Zip </label><input type="text" size="25" maxlength="25" id="zipFld" name="zipFld" />
53:
54: <br/><br/>
55:
56: <div class="centerButton">
57: <button id="Submit">Submit </button>
58: <button id="Reset">Reset </button>
59: </div>
60:
61: </form>
62: </div>
63: <div>
64: <h4>Form Data</h4>
65: <p>First name: <span id="firstTarget"></span><br />
66: Last name: <span id="lastTarget"></span><br/>
67: Zip: <span id="zipTarget"></span>
68: </p>
69: </div>
70: <hr/>
71:<!-- End Page Content -->
72:
73: <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/ftrex.php") ?>
74: </body>
75:</html>