Question

我正在使用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>

Answer 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>

如何输出从JSON提要读取的表单数据？

1 个答案: