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"
}
]
});
});