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>Simple HTML Form with JQuery</title>
6: <meta name="keywords" content="jquery, form, forms, val, event" />
7: <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/cssblue.php"); ?>
8: <script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
9: <script type="text/javascript">
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:
21: $("#simpleForm").submit(function(){
22: return false;
23: });
24:
25: });
26: </script>
27:</head>
28:<body>
29:<?php include($_SERVER['DOCUMENT_ROOT'] ."/in/hdrex.php") ?>
30:
31:<!-- Page Content -->
32: <h3>JQuery HTML Form</h3>
33: <p>This page provides a simple example of using JQuery with a form. The example shows how to:</p>
34: <ul>
35: <li>Retrieve a value from a form field using the <code>val()</code> function.</li>
36: <li>Use the <code>html()</code> function to write HTML inside an element.</li>
37: </ul>
38: <p><a href="SimpleHTMLForm.php.html">View Source</a></p>
39: <hr/>
40: <div class="formBox">
41: <h4>Simple Form</h4>
42: <form id="simpleForm">
43: <label>First name: </label><input type="text" size="25" maxlength="25" id="firstName" name="firstName" />
44: <br/>
45: <label>Last name: </label><input type="text" size="25" maxlength="25" id="lastName" name="lastName" />
46: <br/>
47: <label>Zip </label><input type="text" size="25" maxlength="25" id="zipFld" name="regFld" />
48:
49: <br/><br/>
50:
51: <div class="centerButton">
52: <input type="submit" id="Submit" value="Submit"></input>
53: <input type="reset" id="Reset"></input>
54: </div>
55:
56: </form>
57: </div>
58: <div>
59: <h4>Form Data</h4>
60: <p>First name: <span id="firstTarget"></span><br />
61: Last name: <span id="lastTarget"></span><br/>
62: Zip: <span id="zipTarget"></span><br/>
63: </p>
64: </div>
65: <hr/>
66:<!-- End Page Content -->
67:
68: <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/ftrex.php") ?>
69: </body>
70:</html>