I want to have a condition whereas if they choose Other, they will be redirected to another question, 'Please specify, what brings you to San Francisco?' Otherwise if they check the other boxes it will go to this question, 'Do you currently rent an apartment, home, or room?'
HTML:
<div >
<label for="brings"><h2>What brings you to San Francisco?:</h2></label><br>
<label for="brings"><h2>Choose as many as you like:</h2></label>
<br><br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><h3> I am moving to work in San Francisco</h3></label><br><br>
<label><input type="checkbox" /><h3> I am moving to study in San Francisco</h3></label>
<br><br>
<label><input type="checkbox" /><h3> I am currently working in San Francisco</h3> </label><br><br>
<label><input type="checkbox" /><h3> I am currently studying in San Francisco</h3></label><br><br>
<label><input type="checkbox" /><h3> I am moving to live in the city, but I work/study
remotely</h3></label><br><br>
<label><input type="checkbox" /><h3> I am moving here just to move! I need a new change of scenery</h3></label><br><br>
<label><input type="checkbox" /><h3> Other</h3></label>
</select><br>
</div>
<div >
<label for="brings"><h2><p>Please specify, what brings you to San Francisco?:</p></h2>
</label><br>
<br><br><br><br><br>
<input type="text" id="brings" name="brings" value=""><br>
</div>
<div >
<label for="rent"><h2>Do you currently rent an apartment, home, or room?:</h2></label><br>
<br><br><br><br><br>
<select id="rent">
<option value="yes"><h3>Yes</h3></option>
<option value="no"><h3>No</h3></option><br>
</select><br>
</div>
CodePudding user response：
You can define function call for that specific checkbox & do the redirection, Below is code for your reference:
function gotoNextQuestion()(obj) {
if($(obj).is(":checked")){
//redirect wherever
}
}<label><input type="checkbox" /><h3> I am moving to work in San Francisco</h3></label><br><br>
<label><input type="checkbox" /><h3> I am moving to study in San Francisco</h3></label>
<label><input type="checkbox" onclick="gotoNextQuestion()"/><h3> Other</h3></label>CodePudding user response：
Use a loop to go through checkbox and an if-statement to handle the other element.
const checkboxes = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of checkboxes) {
checkbox.addEventListener('change', (e) => {
if (e.target.checked) {
if (e.target.id === 'other') {
window.location.href = '#other';
} else {
window.location.href = '#rent';
}
}
})
}html {
height: 1500px;
scroll-behavior: smooth;
}<div >
<h2>What brings you to San Francisco?:</h2>
<h2>Choose as many as you like:</h2>
<br><br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" />
<h3> I am moving to work in San Francisco</h3>
</label><br><br>
<label><input type="checkbox" />
<h3> I am moving to study in San Francisco</h3>
</label>
<br><br>
<label><input type="checkbox" />
<h3> I am currently working in San Francisco</h3>
</label><br><br>
<label><input type="checkbox" />
<h3> I am currently studying in San Francisco</h3>
</label><br><br>
<label><input type="checkbox" />
<h3> I am moving to live in the city, but I work/study
remotely</h3>
</label><br><br>
<label><input type="checkbox" />
<h3> I am moving here just to move! I need a new change of scenery</h3>
</label><br><br>
<label><input id="other" type="checkbox" />
<h3> Other</h3>
</label>
<br>
</div>
<div >
<label for="brings">
<h2>
<p>Please specify, what brings you to San Francisco?:</p>
</h2>
</label><br>
<br><br><br><br><br>
<input type="text" id="brings" name="brings" value=""><br>
</div>
<div >
<label for="rent">
<h2 id="rent">Do you currently rent an apartment, home, or room?:</h2>
</label><br>
<br><br><br><br><br>
<select id="rent">
<option value="yes">
<h3>Yes</h3>
</option>
<option value="no">
<h3>No</h3>
</option><br>
</select><br>
</div>However, your HTML code is not valid. I haven't changed it for you, since this is not the scope of your question. Please use https://validator.w3.org/ to validate your code.
CodePudding user response：
Here is the whole code:
<!DOCTYPE html>
<html>
<style type="text/css">
body {
background-image: url("https://dl.dropbox.com/s/n33ou2cvbo8e00s/background blurred.png?dl=0");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center bottom;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
width: 2000px;
height: 2000px;
border: 1px solid blue;
box-sizing: content-box;
}
body {
background-color: rgb(252, 246, 246)
}
#regForm {
background-color: white
margin: 1000px auto;
font-family: 'Open Sans';
padding: 1000px;
width: 200%;
height: 200%;
min-width: 200px;
}
form {
margin: 0 auto;
width:500px;
}
h1 {
text-align: center bottom;
}
input {
padding: 10px;
width: 70%;
font-size: 20px;
font-family: 'Open Sans';
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #F3846F;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #F3846F;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 25%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #04AA6D;
}
.checkboxes {
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
word-wrap: break-word;
}
input[type='checkbox'] {
float: left;
width: 30px;
}
input[type='checkbox'] label {
display: block;
width: 30px;
}
h1 {
font-size: 40px; color: white; font-family: 'Open Sans';
}
h2 {
font-size: 30px; color: white; font-family: 'Open Sans';
}
h3 {
font-size: 20px; color: white; font-family: 'Open Sans';
}
p {
font-size: 15px; color: white; font-family: 'Open Sans';
}
html {
height: 1500px;
scroll-behavior: smooth;
}
</style>
<body>
<form id="myForm">
<form id="myForm" action="https://vybeliving.com/">
<br><br>
</font><center><div ><h1>See if you're a good fit for Vybe!</h1><center>
<br><br><br><br><br>
<center><h1>Press OK to Start</h1><center>
<br><br><br><br><br>
</div>
<br><br>
</div>
<div >
<p ></p>
<div >
<label for="fname"><h2>So, what's your first name?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="fname" name="fname" value=""><br>
</div>
<div >
<label for="lname"><h2>Cheers, what's your last name?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="lname" name="lname" value=""><br>
</div>
<div >
<label for="pn"><h2>What is the best phone number to use to contact you during the day?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="pn" name="pn" value=""><br>
</div>
<div >
<label for="emailadd"><h2>What is the best email to use to contact you during the day?:</h2></label><br>
<input type="text" id="emailadd" name="emailadd" value=""><br>
</div>
<div >
<label for="howlong"><h2>Do you currently live in San Francisco?</h2></label><br>
<br>
<label for="howlong"><h2>If not, where are you living? (Please specify what Country, State, City)</h2></label><br>
<br>
<input type="text" id="emailadd" name="emailadd" value=""><br>
</select><br>
</div>
<div >
<label for="livesit"><h2>Please specify on your current living situation:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="livesit" name="livesit" value=""><br>
</div>
<div >
<label for="visit"><h2>Have you visited San Francisco before this upcoming move?:</h2></label><br>
<br><br><br><br><br>
<select id="visit">
<option value="yes"><h3>Yes</h3></option>
<option value="no"><h3>No</h3></option><br>
</select><br>
</div>
<div >
<h2>What brings you to San Francisco?:</h2>
<h2>Choose as many as you like:</h2>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><h3> I am moving to work in San Francisco</h3></label>
<label><input type="checkbox" /><h3> I am moving to study in San Francisco</h3></label>
<label><input type="checkbox" /><h3> I am currently working in San Francisco</h3></label>
<label><input type="checkbox" /><h3> I am currently studying in San Francisco</h3></label>
<label><input type="checkbox" /><h3> I am moving to live in the city, but I work/study remotely</h3></label>
<label><input type="checkbox" /><h3> I am moving here just to move! I need a new change of scenery</h3></label>
<label><input id="other" type="checkbox" /><h3> Other</h3></label>
<br>
</div>
<div >
<label for="brings">
<p><h2>Please specify, what brings you to San Francisco?:</h2></p></label>
<br><br><br><br><br>
<input type="text" id="brings" name="brings" value="">
</div>
<div >
<label for="rent" id="rent"><h2>Do you currently rent an apartment, home, or room?:</h2></label>
<br><br><br><br><br>
<select id="rent">
<option value="yes"><h3>Yes</h3></option>
<option value="no"><h3>No</h3></option>
</select><br>
</div>
</div>
<div >
<label for="rmmates"><h2>Are you currently living with roommates / housemates?:</h2></label><br>
<br><br><br><br><br>
<select id="rmmates">
<option value="yes"><h3>Yes</h3></option>
<option value="no"><h3>No</h3></option><br>
</select><br>
</div>
<div >
<label for="hmmates"><h2>How many roommates / housemates do you live with?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="hmmate" name="hmmate" value=""><br>
</div>
<div >
<label for="rentpay"><h2>How much are you currently paying towards rent?:</h2></label><br>
<input type="text" id="rentpay" name="rentpay" value=""><br>
</div>
<div >
<label for="utilities"><h2>How much are you currently spending on utilities?
(Just your part, not total):</h2></label><br>
<label for="brings"><h3>Select "This does not apply to me, I do not rent an apartment or home right now" if you do not currently rent.</h3>
<br><br>
<h3>Select "0" if your landlord covers utilities:</h3></label>
<br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><p>$0</p></label>
<label><input type="checkbox" /><p>$25-$50</p></label>
<label><input type="checkbox" /><p>$51-$100</p></label>
<label><input type="checkbox" /><p>$101-$200</p></label>
<label><input type="checkbox" /><p>$201-$300</p></label>
<label><input type="checkbox" /><p>$301 </p></label>
<label><input type="checkbox" /><p>Other</p></label>
</select><br>
</div>
<div >
<label for="clean"><h2>How many hours a week are you spending on deep cleaning your home?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="clean" name="clean" value=""><br>
</div>
<div >
<label for="furnish"><h2>How many weeks did it take you to furnish your home?:</h2></label><br>
<label for="furnish"><h3>type "0" if you live in a furnished home or do not currently rent:</h3></label>
<br><br><br><br><br>
<input type="text" id="furnish" name="furnish" value=""><br>
</div>
<div >
<label for="errands"><h2>How many hours a week does it take to run house-related errands?:</h2></label><br>
<label for="errands"><h3>buying toilet paper, detergent, dish soap, paper towels, just to name a few
type "0" if you live in a furnished home or do not currently rent:</h3></label>
<br><br><br><br><br>
<input type="text" id="errands" name="errands" value=""><br>
</div>
<div >
<label for="maxbudget"><h2>What's your max budget for housing per month? Including utilities:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="maxbudget" name="maxbudget" value=""><br>
</div>
<div >
<label for="basic"><h2>How much are you expecting to spend on basic household goods?:</h2>></label><br>
<label for="basic"><h3>ie: pots, pans, blender, microwave, toaster, shower caddy, dining table, couch, coffee table, plunger, nightstand, bed frame, dresser, cutting boards, knife set, cutlery set, cups, mugs, bowls, plates</h3>
<br><br>
<h3>Put "0" if you don't know:</h3></label>
<br><br><br><br><br>
<input type="text" id="basic" name="basic" value=""><br>
</div>
<div >
<label for="deepclean"><h2>How many hours a week are you expecting to spend deep cleaning your home? :</h2></label><br>
<label for="deepclean"><h3>Put "0" if you don't know:</h3></label>
<br><br><br><br><br>
<input type="text" id="deepclean" name="deepclean" value=""><br>
</div>
<div >
<label for="achieve"><h2>What are you hoping to achieve while in SF?:</h2></label><br>
<label for="achieve"><h3>Select all that apply</h3>
<br><br>
<h3>Choose as many as you like:</h3></label>
<br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><p>Jumpstart your career (Work, excel, get a promotion)</p></label>
<label><input type="checkbox" /><p>Jumpstart your education (Study, excel, get a degree/certification)</p></label>
<label><input type="checkbox" /><p>Meet new friends, grow my network</p></label>
<label><input type="checkbox" /><p>Gain new opportunities (work, personal, etc.)</p></label>
<label><input type="checkbox" /><p>Explore SF's touristy spots, eateries, bars, etc.</p></label>
<label><input type="checkbox" /><p>Other</p></label>
</select><br>
</div>
<div >
<label for="achieve"><h2>Please specify, what are you hoping to achieve while in SF?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="achieve" name="achieve" value=""><br>
</div>
<div >
<label for="lfstyle"><h2>In your own opinion, why do you think you are unable to achieve your ideal lifestyle in SF?:</h2></label><br>
<label for="lfstyle"><h3>Choose as many as you like:</h3></label>
<br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><p>School/Work/Chores take up too much time everyday</p></label>
<label><input type="checkbox" /><p>It's too expensive to do anything</p></label>
<label><input type="checkbox" /><p>It's not a priority for me</p></label>
<label><input type="checkbox" /><p>Being an adult is hard, it's too stressful to do anything else</p></label>
<label><input type="checkbox" /><p>Nothing -- I'll be able to make it happen!</p></label>
<label><input type="checkbox" /><p>Other</p></label>
</select><br>
</div>
<div >
<label for="hoping"><h2>Please specify, what are you hoping to achieve while in SF?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="hoping" name="hoping" value=""><br>
</div>
<div >
<label for="invest"><h2>How willing and able are you to invest into solving these "city living" problems?:</h2></label>
<br>
<div id="radiocb" onclick="cbclick(event)"></div>
<label><input type="checkbox" /><p>I'm willing and able to invest into solving this problem</p></label>
<label><input type="checkbox" /><p>I'm willing, but unable to invest at this point into solving this problem</p></label>
<label><input type="checkbox" /><p>Other</p></label>
</select><br>
</div>
<div >
<label for="cityliving"><h2>Please specify, how willing and able are you to invest into solving these "city living" problems?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="cityliving" name="cityliving" value=""><br>
</div>
<div >
<label for="hwsoon"><h2>How soon are you looking to move?:</h2></label><br>
<select id="hwsoon">
<option value="yday"><h3>Yesterday</h3></option>
<option value="today"><h3>Today</h3></option>
<option value="1-2wks"><h3>1-2 weeks</h3></option>
<option value="1mo"><h3>1 month</h3></option>
<option value="2-3mos"><h3>2-3 months</h3></option>
<option value="3 mos"><h3>3 months</h3></option>
</select><br>
</div>
<div >
<label for="find"><h2>Where did you find us?:</h2></label><br>
<select id="find">
<option value="web"><h3>Website</h3></option>
<option value="fbads"><h3>Facebook Ads</h3></option>
<option value="instaads"><h3>Instagram Ads</h3></option>
<option value="linkedinads"><h3>LinkedIn Ads</h3></option>
<option value="email"><h3>Cold Email Outreach</h3></option>
<option value="insta"><h3>Instagram</h3></option>
<option value="linkedin"><h3>Linkedin</h3></option>
<option value="internet"><h3>Internet Search</h3></option>
<option value="refer"><h3>Referral</h3></option>
<option value="other"><h3>Other</h3></option>
</select><br>
</div>
<div >
<label for="where"><h2>Please specify, where did you find us?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="where" name="where" value=""><br>
</div>
<div >
<label for="reachout"><h2>In a quick sentence, what got you motivated to reach out?:</h2></label><br>
<br><br><br><br><br>
<input type="text" id="reachout" name="reachout" value=""><br>
</div>
</div>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<br><br>
<button type="button" id="nextBtn" onclick="nextPrev(1)">OK ✔</button>
</div>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById(">↓").style.display = "none";
} else {
document.getElementById(">↓").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById(">↑").innerHTML = "Submit";
} else {
document.getElementById(">↑").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i ) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className = " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className = " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i ) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className = " active";
}
const checkboxes = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of checkboxes) {
checkbox.addEventListener('change', (e) => {
if (e.target.checked) {
if (e.target.id === 'other') {
window.location.href = '#other';
} else {
window.location.href = '#rent';
}
}
})
}
</script>
</body>
</html>