Build JSON from dynamicaly generated form jquery dForm plugin

0 votes

I use folowing JSON obj and jquery.dFrom plugin to dynamicaly create this form :

<script type="text/javascript">
$(function() {
  // Generate a form
    $("#myform").dform({
        "action" : "index.html",
        "method" : "get",
        "html" :
        [
            {
                "type" : "p",
                "html" : "You must login"
            },
            {
                "name" : "username",
                "id" : "txt-username",
                "caption" : "Username",
                "type" : "text",
                "placeholder" : "E.g. user@example.com"
            },
            {
                "type" : "select",
                "options" : {
                "us" : "USA",
                "ca" : "Canada",
                "de" : {
                       "selected" : "selected",
                       "html" : "Germany"
                       }
                 }
            },
            {
                "name" : "password",
                "caption" : "Password",
                "type" : "password"
            },
            {
                "type" : "submit",
                "value" : "Login"
            }
        ]
    });
});

generated form :

<form id="myform" action="index.html" method="get" class="ui-dform-form">
<p class="ui-dform-p">You must login</p>
<label for="txt-username" class="ui-dform-label">Username</label>
<input type="text" name="username" id="txt-username" placeholder="E.g. user@example.com" class="ui-dform-text">
<select class="ui-dform-select">
<option class="ui-dform-option" value="us">USA</option>
<option class="ui-dform-option" value="ca">Canada</option>
<option selected="selected" class="ui-dform-option" value="de">Germany</option>
</select>
<label class="ui-dform-label">Password</label>
<input type="password" name="password" class="ui-dform-password">
<input type="submit" class="ui-dform-submit" value="Login">
</form>

How to build JSON obj back from generated form elements with updated values like this :

$(function() {
$("#myform").dform({
    "action" : "index.html",
    "method" : "get",
    "html" :
    [
        {
            "type" : "p",
            "html" : "You must login"
        },
        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "value" : "morowind"
        },
        {
            "type" : "select",
            "options" : {
            "us" : "USA",
            "ca" : {
                     "selected":"Selected",
                     "html":"Canada"
                   },
            "de" : "Germany"
             }
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "text",
            "value": "mika2048"
        },
        {
            "type" : "submit",
            "value" : "Login"
        }
    ]
});
});

Aug 24 in Web Development by gaurav
• 18,960 points
14 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

jQuery + JSON how to define key from variable

I have the following code $.post( ...READ MORE

Jul 28 in Web Development by gaurav
• 18,960 points
33 views
0 votes
0 answers

JQUERY: Getting JSON Data from URL

I am trying to use $.getJSON() to get JSON ...READ MORE

Aug 12 in Web Development by gaurav
• 18,960 points
17 views
0 votes
0 answers

jQuery Validate plugin not validating an element that's not a form input

I need to validate with jQuery Validation ...READ MORE

Aug 18 in Web Development by gaurav
• 18,960 points
85 views
0 votes
0 answers

jQuery Validate plugin not validating an element that's not a form input

I need to validate with jQuery Validation ...READ MORE

Aug 19 in Web Development by gaurav
• 18,960 points
17 views
0 votes
1 answer

How to Return JSON from PHP to JavaScript?

Hello @kartik, Php has an inbuilt JSON Serialising ...READ MORE

answered Jul 6, 2020 in Web Development by Niroj
• 82,780 points
929 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,440 points
28 views
0 votes
1 answer

TypeError: $.ajax(...) is not a function?

Please double-check if you're using the full-version ...READ MORE

answered Feb 22 in Others by Aditya
• 7,660 points
844 views
0 votes
1 answer
0 votes
1 answer
0 votes
0 answers

jQuery JSON Decode ( PHP to Javascript)

I'm trying to make an autocomplete script. ...READ MORE

Jul 1 in Web Development by gaurav
• 18,960 points
41 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP