Form Handling using EasyUI Framework

Last Updated : 05 Mar, 2021

The EasyUI is a 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.

Download all the required pre-compiled files from the official website and save them in your working folder. Please take care of file paths during code implementation.

Official website for EasyUI:

https://www.jeasyui.com/download/index.php

Example 1: The following example demonstrates a simple user form with animated text fields with floating labels. Various classes that are specific to the EasyUI framework like easyui- panel, easyui-textbox, and easyui-linkbutton are used for input controls. For floating labels in the user form , form-floating-label class is used as shown below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
  
    <link rel="stylesheet" type="text/css" 
          href="themes/material-blue/easyui.css"> 
  
    <link rel="stylesheet" type="text/css" 
          href="themes/icon.css"> 
  
    <link rel="stylesheet" type="text/css" 
          href="demo.css"> 
  
    <script type="text/javascript" 
            src="jquery.min.js"> 
    </script> 
      
    <script type="text/javascript" 
            src="jquery.easyui.min.js"> 
    </script> 
      
    <script type="text/javascript" 
            src="plugins/jquery.validatebox.js"> 
    </script> 
      
    <script type="text/javascript" 
            src="plugins/jquery.textbox.js"> 
    </script> 
</head> 
  
<body> 
    <h2> 
        Animated text fields with  
        floating labels 
    </h2> 
  
    <div style="margin:20px 0;"></div> 
    <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:',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:',labelPosition:'top', 
                    validType:'email'"> 
            </div> 
  
            <div class="form-floating-label form-field" 
                style="margin-bottom:20px"> 
                <input class="easyui-textbox" name="message" 
                    style="width:100%;min-height:100px"
                    data-options="label:'Message:', 
                    labelPosition:'top',multiline:true"> 
            </div> 
        </form> 
        <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> 
    </div> 
  
    <script> 
        function submitForm() { 
            $('#formID').form('submit'); 
        } 
        function clearForm() { 
            $('#formID').form('clear'); 
        } 
        function err(target, message) { 
            var target = $(target); 
            if (target.hasClass('textbox-text')) { 
                target = target.parent(); 
            } 
            var msg = target.next('.error-message'); 
            if (!msg.length) { 
                msg = $('<div class="error-message"></div>') 
                    .insertAfter(target); 
            } 
            msg.html(message); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before User Input
After User Input

Example 2: The following example demonstrates the loading of local data and remote data. It also demonstrates the user form validation using EasyUI framework libraries. The same classes are used as in the above example. The class used for combobox is easyui-combox. Refer the output image or video for better understanding.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" 
        href="themes/default/easyui.css"> 
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css"> 
  
    <link rel="stylesheet" type="text/css" 
        href="demo.css"> 
  
    <script type="text/javascript" 
        src="jquery.min.js"></script> 
  
    <script type="text/javascript" 
        src="jquery.easyui.min.js"></script> 
</head> 
  
<body> 
    <h2>Load Form Data using jEasyUI </h2> 
  
    <p>Click to load data</p> 
  
    <div style="margin:20px 0;" id="loadDataDivID"> 
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="loadData()"> 
            Load Data 
        </a> 
          
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="loadDataFromFile()"> 
            Load Remote Data 
        </a> 
          
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            onclick="clearFormFields()"> 
            Clear Form 
        </a> 
    </div> 
  
    <div class="easyui-panel" style="width:100%; 
        max-width:400px;padding:30px 60px;"> 
  
        <form id="formID" method="post"> 
            <div style="margin-bottom:20px"> 
                <input class="easyui-textbox" 
                    name="name" style="width:100%" 
                    data-options="label:'Name:', 
                    required:true"> 
            </div> 
  
            <div style="margin-bottom:20px"> 
                <input class="easyui-textbox" 
                    name="email" style="width:100%"
                    data-options="label:'Email:', 
                    required:true,validType:'email'"> 
            </div> 
  
            <div style="margin-bottom:20px"> 
                <input class="easyui-textbox" 
                    name="message" style="width:100%;height:60px"
                    data-options="label:'Message:',multiline:true"> 
            </div> 
            <div style="margin-bottom:20px"> 
                <select class="easyui-combobox" name="language" 
                    label="Language" style="width:100%"> 
                      
                    <option value="zh-cht">Chinese</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="hi">Hindi</option> 
                    <option value="id">Indonesian</option> 
                    <option value="it">Italian</option> 
                    <option value="ja">Japanese</option> 
                    <option value="ko">Korean</option> 
                    <option value="ru">Russian</option> 
                    <option value="es">Spanish</option> 
                    <option value="vi">Vietnamese</option> 
                </select> 
            </div> 
            <div style="margin-bottom:20px"> 
                <label for="accept" class="textbox-label"> 
                    Accept: 
                </label> 
                  
                <input id="acceptID" type="checkbox" 
                    name="accept" value="true"> 
            </div> 
        </form> 
  
        <div style="text-align:center;padding:5px 0"> 
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="submitFormData()" 
                style="width:80px"> 
                Submit 
            </a> 
  
        </div> 
    </div> 
    <script> 
        function submitFormData() { 
            $('#formID').form('submit', { 
                onSubmit: function () { 
                    return 
                    $(this).form('enableValidation') 
                            .form('validate'); 
                } 
            }); 
        } 
  
        function loadData() { 
            $('#formID').form('load', { 
                name: 'username', 
                email: 'usermail@gmail.com', 
                message: 'usermessage', 
                language: 'en', 
                accept: true 
            }); 
        } 
        function loadDataFromFile() { 
            $('#formID').form('load', 'file_data.json'); 
        } 
        function clearFormFields() { 
            $('#formID').form('clear'); 
        } 
    </script> 
</body> 
  
</html> 

file_data.json The following is the JSON data for “file_data.json” file used in the loadDataFromFile() function of the above HTML code.

  {
    "name":"Tom",
    "email":"tom@gmail.com",    
    "message":"Tom's Message",
    "language":"hi",
    "accept":"true"
}

Output:

Before Clicking the Button:
After Clicking the Button:
Form Validation:

Suggest improvement

HTML Interview Questions and Answers (2024) – Advanced Level

How to design tree structure for files using jQuery EasyUI Mobile ?

Share your thoughts in the comments

Form Handling using EasyUI Framework

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?