Home/ Questions/Q 8729989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T08:56:00+00:00

I am working on a form wizard based on JSON data feed using jquery.dform.

  • 0

I am working on a form wizard based on JSON data feed using jquery.dform. ie it reads the JSON feed and populates the form fields.

Now, I want to be able to output or alert the form field values based on user changes or updates in the form, when the user clicks submit.

I am using jquery.dfrom to generate a form based on JSON example here
https://github.com/daffl/jquery.dform

Thanks

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using jquery serialize() captures all the value/field in the forms and output it or any changes that user may have made to the form fields.

    <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>
    • 0