EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn how to design form using jQuery EasyUI. Form provides various methods to perform actions with form fields such as ajax submit, load, clear, etc.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<form> <form element> </form>
Properties:
- novalidate: It is set to false to validate the form fields.
- iframe: It defines if the form is submitted using iframe mode.
- ajax: It defines if the form is submitted with Ajax.
- dirty: It defines if the form is submitted only with the changed fields.
- queryParams: These are the additional parameters that will be sent to the server when posting a form.
- URL: This is the form action URL to submit.
Event:
- onSubmit: The event which fires before submission.
- onProgress: The event which fires when the upload progress data is available.
- success: The event which fires when the form is submitted successfully.
- onBeforeLoad: The event which fires before a request is made to load data.
- onLoadSuccess: The event which fires when the form data is loaded.
- onLoadError: The event which fires when some errors occur while loading form data.
- onChange: The event which fires when the field values are changed.
Methods:
- clear: Clear the form data.
- reset: Reset the form data.
- validate: Do the form fields validation.
- enableValidation: Enable validation.
- disableValidation: Disable validation.
- resetValidation: Reset validation.
- resetDirty: Reset the dirty flag.
Approach:
- First, add jQuery Easy UI scripts needed for your project.
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Example 1:
<!doctype html> <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
$(document).ready(function (){
$('#gfg').form({
novalidate: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery form widget</h3>
<div class="easyui-panel" title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
<form id="gfg" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:'">
</div>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</form>
</div>
</body>
</html>
|
Output:
form widget
Reference: http://www.jeasyui.com/documentation/