Display a form from a select

Developer
Michel Makei Gefuni
Size
3,732 Kb
Views
18,216
  1. Display a form from a select Previews
  2. Display a form from a select HTML Codes
  3. Display a form from a select CSS Codes
  4. Display a form from a select JS Codes

How do I make an display a form from a select?

Display form according to previous select. What is a display a form from a select? How do you make a display a form from a select? This script and codes were developed by Michel Makei Gefuni on 20 December 2022, Tuesday.

Display a form from a select Previews
IQ Test

Display a form from a select - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Display a form from a select</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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="main"> <div class="col-sm-6"> <select id="subject-category"> <option value="">-- Choose a category --</option> <option value="company">For your company</option> <option value="you">For you</option> </select> </div> <div class="col-sm-6"> <select class="subjectList" id="subject-company"> <option value="">-- Choose a subject --</option> <option value="commercial">Commercial / Sales</option> <option value="doubts">Doubts and critics</option> <option value="suggestions">Suggestions and compliments</option> <option value="partnerships">Partnerships</option> <option value="press">Press office</option> <option value="others">Others</option> </select> <select class="subjectList" id="subject-you"> <option value="">-- Choose a subject --</option> <option value="commercial">Commercial / Sales</option> <option value="doubts">Doubts and critics</option> <option value="suggestions">Suggestions and compliments</option> <option value="partnerships">Partnerships</option> <option value="press">Press office</option> <option value="others">Others</option> </select> </div> <div class="form-container" id="formCompany"> <form> <input class="subject-field" type="hidden" id="subject-field"/> <fieldset> <div class="col-sm-12"> <input type="text" placeholder="Full Name"/> </div> <div class="col-sm-6"> <input type="email" placeholder="Email"/> </div> <div class="col-sm-6"> <input type="tel" placeholder="Phone"/> </div> <div class="col-sm-12"> <input type="text" placeholder="Address"/> </div> <div class="col-sm-12"> <textarea placeholder="Enter your message here"></textarea> </div> </fieldset> <div class="col-sm-12"> <button type="submit">Send</button> </div> </form> </div> <div class="form-container" id="formYou"> <form> <input class="subject-field" type="hidden" id="subject-field"/> <fieldset> <div class="col-sm-12"> <input type="text" placeholder="Full Name"/> </div> <div class="col-sm-6"> <input type="email" placeholder="Email"/> </div> <div class="col-sm-6"> <input type="tel" placeholder="Phone"/> </div> <div class="col-sm-12"> <textarea placeholder="Enter your message here"></textarea> </div> </fieldset> <div class="col-sm-12"> <button type="submit">Send</button> </div> </form> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Display a form from a select - Script Codes CSS Codes

.main { max-width: 500px;
}
select { width: 100%; height: 34px; max-width: 470px; margin: 15px 0; display: block; border-radius: 0; border: #ccc thin solid;
}
.form-container { width: 100%; float: left; opacity: 0; position: absolute; -webkit-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.form-container form { display: none;
}
.form-container.open { opacity: 1; position: relative; -webkit-transform: translateX(0); transform: translateX(0);
}
.form-container.open form { display: block;
}
form { position: relative;
}
form legend,
form input,
form textarea,
form button { display: block;
}
form legend,
form input,
form textarea { width: 100%; margin-bottom: 10px;
}
form input,
form textarea { padding: 5px 10px; border: #ccc thin solid;
}
form textarea { height: 70px;
}
form button { padding: 7px 20px;
}

Display a form from a select - Script Codes JS Codes

var category = $("#subject-category");
var subjectCompany = $("#subject-company");
var subjectYou = $("#subject-you");
var subjectList = $(".subjectList");
var valueSelected = "";
var commercial = "";
var doubts = "";
var suggestion = "";
var partnership = "";
var press = "";
var other = "";
// hide select's from subject
subjectCompany.hide();
subjectYou.hide();
// show/hide select's selected
category.change(function() { valueSelected = category.val(); $('.form-container').removeClass('open'); $(".subjectList").val(''); $(".subject-field").val(''); if (valueSelected === "company") { subjectCompany.show(); subjectYou.hide(); } else if (valueSelected === "you") { subjectCompany.hide(); subjectYou.show(); } else { subjectCompany.hide(); subjectYou.hide(); }
});
// show/hide form's selected
subjectList.change(function() { if (valueSelected === "company") { $('#formCompany').addClass('open'); $('#formYou').removeClass('open'); // fill the subject field var subjectSelected = $(this).val(); $('#formCompany #subject-field').val(subjectSelected); } else if (valueSelected === "you") { $('#formCompany').removeClass('open'); $('#formYou').addClass('open'); // fill the subject field var subjectSelected = $(this).val(); $('#formYou #subject-field').val(subjectSelected); } else { $('.form-container').removeClass('open'); }
});
Display a form from a select - Script Codes
Display a form from a select - Script Codes
Home Page Home
Developer Michel Makei Gefuni
Username michelgefuni
Uploaded December 20, 2022
Rating 3
Size 3,732 Kb
Views 18,216
Do you need developer help for Display a form from a select?

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!

Michel Makei Gefuni (michelgefuni) Script Codes
Name
Arrow CSS
Responsives Squares CSS
Simple Accordion JQuery
Columns with equal height
Charts using ChartJS
HTML to PDF
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!