JavaScript Survey

Developer
Matt Brody
Size
2,568 Kb
Views
8,096
  1. JavaScript Survey Previews
  2. JavaScript Survey HTML Codes
  3. JavaScript Survey CSS Codes
  4. JavaScript Survey JS Codes

How do I make an javascript survey?

What is a javascript survey? How do you make a javascript survey? This script and codes were developed by Matt Brody on 15 January 2023, Sunday.

JavaScript Survey Previews
IQ Test

JavaScript Survey - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Survey</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="col-md-4 col-md-offset-4 mainForm">	<h1>Survey</h1>	<form id="form" class="form-horizontal">	<!-- question 1 using checkboxes -->	<h3>Which cities have you visited?</h3>	<div>	<label class="checkbox-inline"><input type="checkbox" name="checkbox" value="paris">Paris</label>	</div>	<div>	<label class="checkbox-inline"><input type="checkbox" name="checkbox" value="newYork">New York</label>	</div>	<div>	<label class="checkbox-inline"><input type="checkbox" name="checkbox" value="LA">LA</label>	</div>	<div>	<label class="checkbox-inline"><input type="checkbox" name="checkbox" value="cairo">Cairo</label>	</div>	<div>	<label class="checkbox-inline"><input type="checkbox" name="checkbox" value="none">None of the above</label>	</div>	<br>	<!-- question 2 using select and options -->	<h3>What's your favorite color?</h3>	<select class="form-control" id="select" name="select">	<option value="blue" name="option">blue</option>	<option value="red" name="option">red</option>	<option value="green" name="option">green</option>	<option value="black" name="option">black</option>	</select>	<br>	<!-- question 3 using radio buttons -->	<h3>What's your dream pet?</h3>	<div class="radio">	<label><input type="radio" value="dog" name="radio">dog</label>	</div>	<div class="radio">	<label><input type="radio" value="cat" name="radio">cat</label>	</div>	<div class="radio">	<label><input type="radio" value="bird" name="radio">bird</label>	</div>	<div class="radio">	<label><input type="radio" value="snake" name="radio">snake</label>	</div>	<br>	<br>	<div class="form-actions">	<button type="button" id="submitButton" class="btn btn-default">Submit</button>	</div>	</form>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

JavaScript Survey - Script Codes CSS Codes

body {	background-image: url("http://cdn.pcwallart.com/images/san-francisco-wallpaper-3.jpg");
}
.container {	margin-top:40px; margin-bottom:150px;
}
h1 {	text-align:center;
}
label {	font-weight:normal;
}
.form-control {	width:30%;
}
.mainForm {	border:1px solid #EEEEEE;	border-radius:10px;	padding:20px;	background-color:white;
}
.form-actions {	text-align:center;
}

JavaScript Survey - Script Codes JS Codes

//store our survey answers in this array
var surveyArray = []
//submits the form onclick
function submitForm() {	var form = document.getElementById('form')	var selected = document.getElementById('select').value	var checkboxes = form.elements.checkbox	var radios = form.elements.radio	var checkboxesArray = []	for(i = 0; i < checkboxes.length; i++) {	if(checkboxes[i].checked)	checkboxesArray.push(checkboxes[i].value)	}	for(i = 0; i < radios.length; i++) {	if(radios[i].checked)	var radioValue = radios[i].value	}	var newSurvey = {	checked: checkboxesArray,	selected: selected,	radiod: radioValue	}	console.log(checkboxesArray)	console.log(selected)	console.log(radioValue)	surveyArray.push(newSurvey)	console.log(surveyArray)
}
var display = document.getElementById('submitButton')
display.addEventListener('click', submitForm, false)
JavaScript Survey - Script Codes
JavaScript Survey - Script Codes
Home Page Home
Developer Matt Brody
Username mattlbrody
Uploaded January 15, 2023
Rating 3
Size 2,568 Kb
Views 8,096
Do you need developer help for JavaScript Survey?

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!

Matt Brody (mattlbrody) Script Codes
Name
To Do List
Book Finder API using ajax
Simple Quiz App
To Do List with Delete
Gallery App with JS
Instagram API
Zodiac App
Sorting into teams with Fireworks
Digital Clock
Comment App
Create amazing love letters 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!