Title: How do we create multi step form inside easyui dialog.
Post by: Alfred on February 27, 2023, 09:30:51 PM
A multi-step form is beneficial when we have a lot of data to save in a database. Could you please explain how to create a form wizard using EasyUI? Additionally, is there an extension or demo available in EasyUI?
Thanks
Title: Re: How do we create multi step form inside easyui dialog.
Post by: jarry on March 01, 2023, 12:00:52 AM
This is the simple example shows how to create a wizard on a dialog. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head>
<body> <div id="dlg" class="easyui-dialog" title="Step Dialog" style="width:400px;height:200px;"> <div id="tt" class="easyui-tabs" fit="true" border="false" showHeader="false"> <div class="f-column"> <div class="f-full"> <p>Step 1 Content.</p> </div> <div style="padding:10px;text-align:right"> <button class="easyui-linkbutton" onclick="$('#tt').tabs('select',1)">Next</button> </div> </div> <div class="f-column"> <div class="f-full"> <p>Step 2 Content.</p> </div> <div style="padding:10px;text-align:right"> <button class="easyui-linkbutton" onclick="$('#tt').tabs('select',0)">Prev</button> <button class="easyui-linkbutton" onclick="$('#tt').tabs('select',2)">Next</button> </div> </div> <div class="f-column"> <div class="f-full"> <p>Step 3 Content.</p> </div> <div style="padding:10px;text-align:right"> <button class="easyui-linkbutton" onclick="$('#tt').tabs('select',1)">Prev</button> <button class="easyui-linkbutton">Finish</button> </div> </div> </div> </div> </body>
</html>
Title: Re: How do we create multi step form inside easyui dialog.
Post by: Alfred on March 02, 2023, 05:30:06 AM
This method is effective. I used the HTML tag <a href> instead of the button element because clicking on a button automatically submits the form.
Thanks.
Title: Re: How do we create multi step form inside easyui dialog.
Post by: poeziafree on March 15, 2023, 11:51:27 AM
To create a multi-step form inside an EasyUI dialog, you can follow these steps: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multi-step form in EasyUI Dialog</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <!-- Your code will go here -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <form id="multiStepForm" method="post" novalidate> <div id="step1" class="step"> <h3>Step 1</h3> <div class="easyui-form-item"> <label for="field1">Field 1:</label> <input id="field1" name="field1" class="easyui-textbox" required="true"> </div> <div class="easyui-form-item"> <label for="field2">Field 2:</label> <input id="field2" name="field2" class="easyui-textbox" required="true"> </div> </div> <div id="step2" class="step" style="display:none"> <h3>Step 2</h3> <div class="easyui-form-item"> <label for="field3">Field 3:</label> <input id="field3" name="field3" class="easyui-textbox" required="true"> </div> <div class="easyui-form-item"> <label for="field4">Field 4:</label> <input id="field4" name="field4" class="easyui-textbox" required="true"> </div> </div> <!-- Add more steps as needed --> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="nextStep();" style="width:90px">Next</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a> </div>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#dlg').dialog('open').dialog('setTitle', 'Multi-step Form')">Open Multi-step Form</a>
<script type="text/javascript"> var currentStep = 1;
function nextStep() { var form = $('#multiStepForm'); form.form('submit', { onSubmit: function() { var isValid = $(this).form('validate'); if (isValid) { currentStep++; $('.step').hide(); $('#step' + currentStep).show();
if (currentStep > 1) { $('.c6').linkbutton({ text: 'Submit' }); }
// If there are more steps, return false to prevent form submission if (currentStep < $('.step').length) { return false; } } return isValid; }, success: function(data) { alert('Form submitted successfully'); $('#dlg').dialog('close'); // Reset the form and step form.form('clear'); currentStep = 1; $('.step').hide(); $('#step1').show(); $('.c6').linkbutton({ text: 'Next' }); } }); } </script>
</body> </html>
|