Bug Tracker

Ticket #3527: subforms.htm

File subforms.htm, 3.0 KB (added by antix, 11 years ago)

sub form issue

Line 
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5    <title>Sub-forms</title>
6    <style type="text/css">
7    </style>
8   
9    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
10    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
11   
12    <script type="text/javascript">
13        $(document).ready(function() {
14            var $list = $("#List"),
15                $detail = $("#Detail"),
16                $detailName = $detail.find("#Name"),
17                $detailDescription = $detail.find("#Description");
18
19            $detail.hide();
20            $list.find("li").click(function() {
21                var $this = $(this),
22                    $title = $this.find("span");
23
24                $detail.hide("fast",
25                    $detail.css("display") == "none" || $this.find("form").length == 0
26                    ? function() {
27                        $detailName
28                            .unbind("change")
29                            .change(function() { $title.text(this.value) })
30                            .val($title.text());
31                        $detailDescription
32                            .unbind("change")
33                            .change(function() { $this.data("description", this.value) })
34                            .val($this.data("description") || "");
35
36                        $this.append($detail);
37                        $detail.show("slow");
38                    }
39                    : "");
40            });
41            $("form")
42                .click(function(e) { e.stopPropagation() })
43                .submit(function() {
44                    var $this = $(this);
45                    $this.validate().form();
46                   
47                    alert(this.id.concat("\n", $this.serialize()));
48
49                    if (this.id == "Detail") { $this.hide("fast"); }
50                    return false;
51                });
52        });
53    </script>
54</head>
55<body>
56    <form id="List">
57        <ul>
58            <li><input name="active_1" type="checkbox" checked="checked" /><span>Item 1</span></li>
59            <li><input name="active_2" type="checkbox" checked="checked" /><span>Item 2</span></li>
60            <li><input name="active_3" type="checkbox" checked="checked" /><span>Item 3</span></li>
61        </ul>
62        <p><input type="submit" /></p>
63    </form>
64   
65    <form id="Detail">
66        <p>
67            <label for="Name">Name</label>
68            <input id="Name" name="Name" class="required" />
69        </p>
70        <p>
71            <label for="Description">Description</label>
72            <textarea id="Description" name="Description" class="required"></textarea>
73        </p>
74        <p><input type="submit" /></p>
75    </form>
76</body>
77</html>