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>
