Dynamic result form

Developer
Claudio Holanda
Size
4,282 Kb
Views
14,168
  1. Dynamic result form Previews
  2. Dynamic result form HTML Codes
  3. Dynamic result form CSS Codes
  4. Dynamic result form JS Codes

How do I make an dynamic result form?

Exploring JavaScript to return an result based on the choices of user after filling up the form. CSS3 used to give some fancy to the form's inputs.. What is a dynamic result form? How do you make a dynamic result form? This script and codes were developed by Claudio Holanda on 18 October 2022, Tuesday.

Dynamic result form Previews
IQ Test

Dynamic result form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic result form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="form">	<header>	<h1>WHICH PET FORM</h1>	<h2>Please fill all the form bellow.</h2>	</header>	<ul> <li class="question"> <h3>Do you mind bathing your pet on a regular basis?</h3>	<label class="choice"> <input type="radio" name="q1" value="dog" />	<span>NOPE</span>	</label>	<label class="choice"> <input type="radio" name="q1" value="cat" />	<span>YES, I SUCK AT BATHING</span>	</label> </li>	<li class="question">	<h3>Do you mind giving <b>lots</b> of attention to your pet?</h3>	<label class="choice"> <input type="radio" name="q2" value="dog" />	<span>NOPE</span>	</label>	<label class="choice"> <input type="radio" name="q2" value="cat" />	<span>YES, I MY DAY IS KINDA FULL</span>	</label> </li>	<li class="question"> <h3>Elegance of fussiness?</h3>	<label class="choice"> <input type="radio" name="q3" value="cat" />	<span>ELEGANCE</span>	</label>	<label class="choice"> <input type="radio" name="q3" value="dog" />	<span>FUSS 4 EVAR!</span>	</label> </li>	<li class="question"> <h3>Does barking is a problem for you?</h3>	<label class="choice"> <input type="radio" name="q4" value="cat" />	<span>YEAH :(</span>	</label>	<label class="choice"> <input type="radio" name="q4" value="dog" />	<span>NOT ACTUALLY</span>	</label> </li>	<li class="question"> <h3>Is affection a must for you?</h3>	<label class="choice"> <input type="radio" name="q5" value="dog" />	<span>MY PET MUST LOOOVE ME!</span>	</label>	<label class="choice"> <input type="radio" name="q5" value="cat" />	<span>REGULAR WARMTH IS ENOUGHT</span>	</label> </li>	</ul>	<button class="button-submit" onclick="calcResults('.form')">SEE MY RESULT</button>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic result form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
body { font-family: Lato, Helvetica, Arial, sans-serif; background: linear-gradient(#dfdbd7, #d7d3d3); color: #545454; margin: 0; min-height: 100vh;
}
.form { max-width: 520px; background: #fff; margin: 1em auto; padding-bottom: 1em; border-radius: 8px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);
}
.form header { border-bottom: 3px double #e9e9e9; padding: 1em 0; padding-bottom: 1em;
}
.form header h1 { text-align: center; font-size: 1.3em; color: #5f7796; font-weight: bolder;
}
.form header h2 { text-align: center; font-size: 1em; color: #94a9c3; font-weight: normal;
}
.form .button-submit { font-weight: regular; color: #fff; font-size: 1em; padding: 0.8em 2em; border-radius: 50em; border: none; background: #5f7796; margin: 1em auto 0.3em; display: block; transition: all 0.2s linear;
}
.form .button-submit:hover { background: #374558;
}
.form ul { list-style: none; margin: 0; padding: 0;
}
.form ul h3 { font-weight: normal; font-size: 1.2em;
}
.form ul .question { padding: 0 1em 1.5em; border-bottom: 1px solid #e9e9e9;
}
.form ul .question .choice span { background: #70b48b; color: #fff; font-size: 0.8em; padding: 0.5em 1.5em 0.5em 2em; margin: 0 1.2em 0 0; border-radius: 100px; position: relative; min-width: 50px; text-align: center; display: inline-block; transition: all 0.2s linear; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset, 0 0 0 2px rgba(0, 0, 0, 0);
}
.form ul .question .choice span:before { content: ''; background: #fff; position: absolute; top: 9px; left: 7px; border-radius: 50%; width: 10px; height: 10px;
}
.form ul .question .choice span:after { content: ''; position: absolute; z-index: 2; width: 6px; height: 6px; top: 11px; left: 9px; transform: scale(0); border-radius: 50%; transition: all 0.3s linear;
}
.form ul .question .choice span:hover,
.form ul .question .choice span:focus { background: #417d59;
}
.form ul .question .choice input { display: none;
}
.form ul .question .choice input:checked + span { box-shadow: 0 0 0 2px #5f7796 inset, 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.form ul .question .choice input:checked + span:after { background: #5f7796; transform: scale(1);
}

Dynamic result form - Script Codes JS Codes

function resultsFromForm(el){ var results = {}; $('.question',el).each(function(){ var iv = $('input:checked', this)[0].value; if(results[iv] == undefined){ results[iv] = 1;	}else{ results[iv]++; } });	return results;
}
function calcResults(el){ if(getKeyOfMaxObjValue(resultsFromForm('.form')) == "dog"){ alert("You should look for a dog!");	}else{	alert("You should look for a cat!");	}
}
/* * Solution bellow taken from * https://goo.gl/rBpjQd */
function getKeyOfMaxObjValue(obj){	var max = -Infinity; var key; for(var prop in obj) { // ignore inherited properties if(obj.hasOwnProperty(prop)) { if(obj[prop] > max) { max = obj[prop]; key = prop; } } }	return key;
}
Dynamic result form - Script Codes
Dynamic result form - Script Codes
Home Page Home
Developer Claudio Holanda
Username kazzkiq
Uploaded October 18, 2022
Rating 4
Size 4,282 Kb
Views 14,168
Do you need developer help for Dynamic result form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Claudio Holanda (kazzkiq) Script Codes
Name
Skewed Menu
Fully responsive CSS3 menu
CSS-Only Chart
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!