<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/metro/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"demo.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/icon.css"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.min.js"
>
</
script
>
</
head
>
<
body
>
<
h2
>
jQuery EasyUI load
user form data
</
h2
>
<
div
class
=
"easyui-panel"
style="width:100%;max-width:400px;
padding:30px 60px;">
<
form
id
=
"formID"
method
=
"post"
>
<
div
class
=
"form-floating-label form-field"
style
=
"margin-bottom:20px"
>
<
input
class
=
"easyui-textbox"
name
=
"name"
style
=
"width:100%"
data-options="label:'Name:',
required:true,labelPosition:'top'">
</
div
>
<
div
class
=
"form-floating-label form-field"
style
=
"margin-bottom:20px"
>
<
input
class
=
"easyui-textbox"
name
=
"email"
style
=
"width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</
div
>
<
div
class
=
"form-floating-label form-field"
style
=
"margin-bottom:20px"
>
<
input
class
=
"easyui-textbox"
name
=
"message"
style
=
"width:100%;height:60px"
data-options="label:'Message:',multiline:true,
labelPosition:'top'">
</
div
>
<
div
class
=
"form-floating-label form-field"
style
=
"margin-bottom:20px"
>
<
select
class
=
"easyui-combobox"
name
=
"language"
style
=
"width:100%"
data-options="label:'Language:',
labelPosition:'top'">
<
option
value
=
"ar"
>Arabic</
option
>
<
option
value
=
"nl"
>Dutch</
option
>
<
option
value
=
"en"
selected
=
"selected"
>
English</
option
>
<
option
value
=
"fr"
>French</
option
>
<
option
value
=
"de"
>German</
option
>
<
option
value
=
"el"
>Greek</
option
>
<
option
value
=
"hi"
>Hindi</
option
>
<
option
value
=
"ja"
>Japanese</
option
>
<
option
value
=
"ko"
>Korean</
option
>
</
select
>
</
div
>
</
form
>
<
div
style
=
"text-align:center;padding:5px 0"
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"clearForm()"
>
Reset
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"loadData()"
>
Load Data
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"loadRemoteData()"
>
LoadRemote
</
a
>
</
div
>
</
div
>
<
script
>
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
// Load data
function loadData(){
$('#formID').form('load',{
name:'Sahil',
email:'sahil@gmail.com',
message:'hello GFG',
language:'en'
});
}
// Load remote json file data
function loadRemoteData(){
$('#formID').form('load','form-data.json');
}
</
script
>
</
body
>
</
html
>