1

我正在使用 jquery.dform 开发基于 JSON 数据馈送的表单向导。即它读取 JSON 提要并填充表单字段。

现在，当用户单击提交时，我希望能够根据用户在表单中的更改或更新来输出或提醒表单字段值。

我在这里使用 jquery.dfrom 生成基于 JSON 示例的表单 https://github.com/daffl/jquery.dform

谢谢

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Get started with jQuery dForm</title>
</head>
<style type="text/css">
    input, label {
        display: block;
        margin-bottom: 5px;
    }
</style>
<body>
<!--<form id="demo-1-form"></form>
<pre data-for="demo-1"></pre>  -->

<form id="demo-2-form"></form>
<pre data-for="demo-2"></pre>

<!-- Load jQuery and the minified plugin -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="dist/jquery.validate.js"></script>
<script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>



<script type="text/javascript" class="demo" id="demo-2">
$('#demo-2-form').dform({
    "action":"index.html",
    "method":"post",
    "html":[
        {
            "type":"fieldset",
            "caption":"User information",
            "html":[
                {
                    "name":"email",
                    "caption":"Email address",
                    "type":"text",
                    "placeholder":"E.g. user@example.com",
                    "validate":{
                        "email":true
                    }
                },
                {
                    "name":"password",
                    "caption":"Password",
                    "type":"password",
                    "id":"registration-password",
                    "validate":{
                        "required":true,
                        "minlength":5,
                        "messages":{
                            "required":"Please enter a password",
                            "minlength":"At least {0} characters long"
                        }
                    }
                },
                {
                    "name":"password-repeat",
                    "caption":"Repeat password",
                    "type":"password",
                    "validate":{
                        "equalTo":"#registration-password",
                        "messages":{
                            "equalTo":"Please repeat your password"
                        }
                    }
                },
                {
                    "type":"radiobuttons",
                    "caption":"Sex",
                    "name":"sex",
                    "class":"labellist",
                    "options":{
                        "f":"Female",
                        "m":"Male"
                    }
                },
                {
                    "type":"checkboxes",
                    "name":"test",
                    "caption":"Receive newsletter about",
                    "class":"labellist",
                    "options":{
                        "updates":"Product updates",
                        "errors":{
                            "value":"security",
                            "caption":"Security warnings",
                            "checked":"checked"
                        }
                    }
                }
            ]
        },
        {
            "type":"fieldset",
            "caption":"Address information",
            "html":[
                {
                    "name":"name",
                    "caption":"Your name",
                    "type":"text",
                    "placeholder":"E.g. John Doe"
                },
                {
                    "name":"address",
                    "caption":"Address",
                    "type":"text",
                    "validate":{ "required":true }
                },
                {
                    "name":"zip",
                    "caption":"ZIP code",
                    "type":"text",
                    "size":5,
                    "validate":{ "required":true }
                },
                {
                    "name":"city",
                    "caption":"City",
                    "type":"text",
                    "validate":{ "required":true }
                },
                {
                    "type":"select",
                    "name":"continent",
                    "caption":"Choose a continent",
                    "options":{
                        "america":"America",
                        "europe":{
                            "selected":"true",
                            "id":"europe-option",
                            "value":"europe",
                            "html":"Europe"
                        },
                        "asia":"Asia",
                        "africa":"Africa",
                        "australia":"Australia"
                    }
                }
            ]
        },
        {
            "type":"submit",
            "value":"Signup"
        }
    ]
});
</script>
</body>
</html>
4

1 回答 1

1

使用 jquery serialize() 捕获表单中的所有值/字段并输出它或用户可能对表单字段所做的任何更改。

<script type="text/javascript">

   $('#demo-2-form').on('submit', function(ev) {
        //alert($(this).serialize());
        var data = $(this).serialize(); // -> The URL encoded form data
         $("#results").text(data);

        ev.preventDefault();
    });
</script>
于 2012-10-22T20:59:37.250 回答