How to open next/prior step block with JS code?

I have template(HTML / jQuery v3.6) with wizard steps defined as

<div id="modal-completion-registration" class="modal modal-completion-registration">

<div class="completion-registration__progress">
<div class="completion-registration__progress-item active" data-registration-step="1">
...
</div>
<div class="completion-registration__progress-item" data-registration-step="2">
...
</div>
<div class="completion-registration__progress-item" data-registration-step="3">
...
</div>
</div>

HTML:

I suppose when button on any step block is clicked then next step block becomes active automatically, but in real app
any step is submitted with ajax request and depending on request status(success/failure) I need to move to next step programmatically
with JS code. How can I open next/prior step block with JS code?

This template use jquery3.6.0 and jquery-ui-1.12.1 and no any additive jquery plugings.
I googled in net and failed to find these functionality description.
Please, provide a relative link...

Thanks!

 

This is a great example of how the mental huffing midgetry of jQuery and the outright dumbass trash that are jQuery-UI dupes people into not knowing even the most basic of concepts, and worse think in terms of scripting only solutions. Forms are usually pretty important so the first step would be to make a working form WITHOUT the scripttardery FIRST!

Those endless pointless DIV and classes for NOTHING not doing you any favors either.

I would divide each of those sections into FIELDSET since they are in fact sets of fields. Write it as a normal form that way. Then to implement the steps add a RADIO button before each section, with an extra one at the start with the value of "noscript". This way the submit can be step or non-step based.

<form id="demo">
	<input type="radio" name="step" value="noscript" checked hidden>
	<input type="radio" name="step" value="1" hidden>
	<fieldset>
		<legend>Describe Step 1 Here</legend>
		<!-- inputs and labels here -->
	</fieldset>
	<input type="radio" name="step" value="2" hidden>
	<fieldset>
		<legend>Describe Step 2 Here</legend>
		<!-- inputs and labels here -->
	</fieldset>
	<input type="radio" name="step" value="3" hidden>
	<fieldset>
		<legend>Describe Step 3 Here</legend>
		<!-- inputs and labels here -->
	</fieldset>
	<footer>
		<button>Submit</button>
	</footer>
</form>

Code (markup):

The scripted version would then on load advance the selected button to step one indicating we've got scripted submits. Then intercept submit to send the data server-side and advance to the next radio button.

{

	let stepSelected = document.querySelector("input[name=step]");
	
	const
		advanceSelected = () => {
			if (stepSelected) do {
				stepSelected = stepSelected.nextElementSibling;

			} while (
				stepSelected &&
				stepSelected.tagName != "INPUT"
			);
			if (stepSelected) stepSelected.checked = true;
			return stepSelected;
		},
		stepSubmitSuccess = () {
			if (!advanceSelected()) {
				/* reached end, show your "submit successfully" message */
			}
		},
		stepSubmit = (e) => {
			let data = new FormData(this.currentTarget);
			
			/* 
				do your ajax submit here.
				When it succeeds call stepSubmitSuccess()
			*/
			
		};
	
	document.getElementById("demo").addEventListener("submit", stepSubmit);
	
	advanceSelected();
	
}

Code (markup):

Might have some typo's and is untested, but should do the trick.

Now how do we show/hide these fieldset?

#demo > fieldset {
	/* hide these off screen, since display:none breaks navigation */
	position:absolute;
	bottom:100%;
	right:100%;
}

#demo input[name="step"][value="noscript] ~ fieldset,
#demo input[name="step"]:checked + fieldset {
	display:static; /* remove all positioning */
}

Code (markup):

Letting CSS do our heavy lifting, and opening the door to doing CSS animations.

Server-side if $_POST["step"] == noscript you process the whole form. If it's set to a number, process only that step. You could when pulling your FormData remove fields that aren't part of your current step. Shame you can't FormData on a fieldset... though another approach could be to build the FormData using a deep DOM walk.

Hmm... this gives me an idea for a Medium article.