JSFiddle - React, Tailwind, and code Playground

by ggChris

JavaScript

$(document).ready(function($){
	
	var steps = $('form').find(".questions");
	var count = steps.size();
	
	steps.each(function(i){
		hider=i+2;
		if (i == 0) { 	
    		$("#question_" + hider).hide(); 
    		createNextButton(i);
        }
		else if(count==i+1){
			var step=i + 1;
			//$("#next"+step).attr('type','submit');
            $("#next"+step).on('click',function(){				
				submit();
            });
	    }
		else{
			$("#question_" + hider).hide();
			createNextButton(i);
		}
	});
	
	function submission(){
		// process the form	
		// get the form data
		// there are many ways to get this data using jQuery (you can use the class or id also)
		var langformData = {
			'lq1'  : $('input.lang:checked').serialize().replace(/%5B%5D/g, '[]').replace(/%23/g, '#'),
			'lq2'  : $('input[name=lq2]:checked').val(),
			'lq3'  : $('input[name=lq3]:checked').val(),
			'lq4'  : $('input[name=lq4]:checked').val(),
			'lq5'  : $('input[name=lq5]:checked').val(),
			'lq6'  : $('input[name=lq6]:checked').val(),
			'lq7'  : $('input[name=lq7]:checked').val(),
			'lq8'  : $('input[name=lq8]:checked').val(),
			'lq9'  : $('input[name=other]').val(),
			'lq10' : $('input[name=lqvs]').val(),
			'lq11' : $('input#radio77_8').val(),
			'lq12' : $('input[name=lqms]').val()
		};
			
		// process the form
		$.ajax({
			type    : 'POST', // define the type of HTTP verb we want to use (POST for our form)
			url     : 'lang_ajax.php', // the url where we want to POST
			data    : langformData, // our data object
			success : function() {
				console.dir (langformData);
			},
			error   : function() {
				console.log ('Error submitting');
			}
		})				
	}
	
	var q = 1;
	function createNextButton(i){
		var step  = i + 1;
		var step1 = i + 2;
		var a     = 1;
        $('#next'+step).on('click',function(){
				submission();
				$('#errors').addClass('hide');
				$("#question_" + step).hide();
				$("#question_" + step1).fadeIn(700);					
				var numQuestions =...