Dependent drop down list > demonstrate image from server

Report · Dec 28, 2018

Community, Hello!

Maybe someone know how to do it..

I need make form with Dependent drop down list for filtering car models

(bmw > bmw1, bmw2 ; audi > audi1, audi2 ; etc),

and after choosing model show under my form Image of this car

And after clicking button write down to file this model with contact of my site visitor

Thnx!

Report · Dec 28, 2018

This will be a 3 step process..

#1 the HTML form and select list.

#2 the jQuery script to hide/show selected results.

#3 a form processing script in a server-side language that is compatible with your hosting plan. Ask you hosting provider which scripts you can use to process contact form data. They may have a script you can use on their servers.

For parts 1 & 2, the HTML and jQuery code is as follows.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conditional Form with jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**wrap form lables and fields inside ordered lists for better web accessibility**/
form ol {
list-style: none;
margin: 0;
padding: 0
}
form li {
padding: 5px;
margin: 0;
}
form legend {
padding: 8px;
background: #537374;
font-weight: bold;
color: #FFF;
line-height: 1.5;
}
form label {display:block}
</style>
</head>
<body>
<!--get the script from your web host-->
<form action="assets/form-to-email-script.php">
<fieldset>
<legend>Conditional Select:</legend>
<ol>
<li>
<label for="fullname">Name:</label>
<input type="text" name="fullname" required placeholder="First & Last"></li>
<li>
<label or="email">E-Mail:</label>
<input type="email" name="email" required placeholder="you@domain.com"></li>
<li>
<label for="MySelect">Car (select one):</label>
<select name="MySelect" id="MySelect" size="4" required title="Please select something!">
<option value="1">Audi</option>
<option value="2">Saab</option>
<option value="3">Fiat</option>
<option value="4">BMW</option>
</select>
</li>
<!--hidden until selected-->
<li id="one"> You selected Audi: <img src="assets/audi.jpg"> </li>
<li id="two"> You selected Saab: <img src="assets/saab.jpg"> </li>
<li id="three"> You selected Fiat: <img src="assets/fiat.jpg"> </li>
<li id="four"> You selected BMW: <img src="assets/bmw.jpg"> </li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</fieldset>
</form>
<!--latest jQuery Core Library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script>
$(document).ready(function () {
//hide/show results//
 $('#one,#two,#three,#four').hide();
 $('#MySelect').bind('change', function (e) {
 if ($('#MySelect').val() == 1) {
 $('#one').show('slow');
 } else {
 $('#one').hide();
 }
 if ($('#MySelect').val() == 2) {
 $('#two').show('slow');
 } else {
 $('#two').hide();
 }
 if ($('#MySelect').val() == 3) {
 $('#three').show('slow');
 } else {
 $('#three').hide();
 }
 if ($('#MySelect').val() == 4) {
 $('#four').show('slow');
 } else {
 $('#four').hide();
 }
});
});
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 29, 2018

As always: this couldn‘t be more helpful for a Muse user, Nancy!

Frankly spoken, mycola_n: This isn‘t doable with Muse in the way, you want it to work.

But there are certainly ways to achieve something quite similar using nested accordions and/or compositions. In this case, we need more informations about how the page should look like.

What do you mean with „form“? Are you talking about email forms? In this case you can achieve, what you want by using „jotform“ to build the form and integrate the respective code into a Muse page.

Adobe Community

Dependent drop down list > demonstrate image from server