Highlighted

Dependent drop down list > demonstrate image from server

New Here ,
Dec 28, 2018

Copy link to clipboard

Copied

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!

Views

184

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dependent drop down list > demonstrate image from server

New Here ,
Dec 28, 2018

Copy link to clipboard

Copied

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!

Views

185

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 28, 2018 0
Adobe Community Professional ,
Dec 28, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 28, 2018 0
LEGEND ,
Dec 29, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 29, 2018 0