We Keep Coding

How to show user all values selected after multi-step form

I am making a multistep form for a user to book a reservation. This form will let the user choose a few options at a time before submitting the form values to the database. I currently have the multistep form working through JS. I want to show all the values selected to the user one final time in the last ".input-group" Div labeled "Registration Confirm", and at this location they can submit the reservation after reviewing it is all correct. I am stuck on getting the final values to all show up in the last section however. I am aware the form is not done to be submitted to the database, I am trying to figure out how to show all the values before I go any further and do not mind if it is JS or Jquery.
I have tried saving the values to sessionStorage using this method for each option however it will not work. Dev tools is also telling me that no issues are arrising when I used this method so I am a bit stuck as nothing is showing up in the final div.
const destination = document.getElementById('result-destination').value;
sessionStorage.setItem("DESTINATION", destination);
const destinationChoice = sessionStorage.getItem('DESTINATION');
document.getElementById('choiceDestination').innerHTML = destinationChoice;
form.html
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="destination-choice select" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="room-choice select" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" id="result-checkin" />
<input type="date" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="guestNumber select" id="guestNumber" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
form.js
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}
form.css
/* Progress Bar Start */
.progressbar {
position: relative;
display: flex;
justify-content: space-around;
counter-reset: step;
margin: 0.5rem 0rem 0.5rem;
width: 50%;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.5rem;
height: 2.5rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--highlight-yellow);
color: #f3f3f3;
}
/* Progress Bar End */
/* Form Start */
.form-step {
display: none;
transform-origin: top;
animation: animate .5s;
}
label {
color: var(--wei);
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
/* Form End */
.registerForm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#registrationTitle {
margin-top: 10px;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
color: var(--highlight-yellow);
font-family: var(--font-family-ubuntu);
font-weight: 400;
}
/* Buttons Start */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
font-size: var(--font-size-20);
padding: 0.75rem;
display: block;
text-decoration: none;
background-color: var(--background-grey);
color: var(--background-blue);
text-align: center;
border-radius: 0.25rem;
border-color: var(--text-color);
border-style: solid;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0 0 0 2px var(--highlight-yellow), 0 0 0 2px var(--highlight-yellow);
border-color: var(--background-blue);
color: var(--background-blue);
-webkit-text-stroke: .5px var(--highlight-yellow);
}
/* Buttons End */
Any help is appreciated. Thank you!

Here you go :
HTML :
<form action="" class="registerForm" name="bookform">
<h1 id="registrationTitle">
Book Your Stay!
</h1>
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="Room"></div>
<div class="progress-step" data-title="Contact"></div>
<div class="progress-step" data-title="Extras"></div>
<div class="progress-step" data-title="Confirm"></div>
</div>
<div class="form-step form-step-active">
<div class="input-group">
<select class="user_change destination-choice select" data-name="choiceDestination" id="result-destination" name="result-destination">
<option value="Choose Destination" disabled selected hidden>Choose Destination</option>
<option value="LasVegas">LasVegas</option>
<option value="Seattle">Seattle</option>
</select>
</div>
<div class="input-group">
<select class="user_change room-choice select" data-name="choiceRoom" id="result-room" name="result-room">
<option value="Choose Your Room" disabled selected hidden>Choose Your Room</option>
<option value="Double Full Beds">Double Full Beds</option>
<option value="Double Queen Beds">Double Queen Beds</option>
<option value="Queen Bed">Queen Bed</option>
<option value="King Bed">King Bed</option>
</select>
</div>
<div class="input-group">
<input type="date" class="user_change" data-name="choiceCheckin" id="result-checkin" />
<input type="date" class="user_change" data-name="choiceCheckout" id="result-checkout" />
</div>
<div class="">
<a class="btn btn-next width-50 ml-auto" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="name">Name</label>
<input type="text" class="user_change" data-name="choiceName" name="name" id="name" />
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" class="user_change" data-name="choicePhone" name="phone" id="phone" />
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" class="user_change" data-name="choiceEmail" name="email" id="email" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="guestNumber">Number Of Guests</label>
<select class="user_change guestNumber select" id="guestNumber" data-name="choiceGuests" name="guestNumber">
<option value="0" disabled selected hidden>How Many Guests Are There?</option>
<option value="1">1-2</option>
<option value="2">3-5</option>
</select>
</div>
<div class="input-group">
<label for="amenities">Amenities</label>
<input type="number" class="user_change" data-name="choiceAmenities" name="amenities" id="amenities" />
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<a class="btn btn-next" >Next</a>
</div>
</div>
<div class="form-step">
<div class="input-group">
<label for="confirmRegistration">Registration Confirm</label>
<p id="choiceDestination"></p>
<p id="choiceRoom"></p>
<p id="choiceCheckin"></p>
<p id="choiceCheckout"></p>
<p id="choiceName"></p>
<p id="choicePhone"></p>
<p id="choiceEmail"></p>
<p id="choiceGuests"></p>
<p id="choiceAmenities"></p>
</div>
<div class="btns-group">
<a class="btn btn-prev">Previous</a>
<input type="submit" value="Submit" class="btn" />
</div>
</div>
</form>
Additional JS to Your JS :
// My Stuff
// Create an Empty Object
var the_data_obj = {};
// On change of input elements to update the object
$(".user_change").change(function(){
var changed_field = $(this).attr("data-name");
var changed_field_val = $(this).val();
the_data_obj[changed_field] = changed_field_val;
// Finally view the added stuff
$("#"+changed_field).text(changed_field_val);
console.log(the_data_obj);
});
What did i do..?
Added a new class user_change to every input you have there..
Added a new data attribute data-name to every input you have there..
Created a new Object.
On change of every input by user parsing the input field key by data-name and input field value by parsed data atrr.
Updated the same in new created Obj.
Printing the same value in the final div.
Here's the working JSFiddle for the same :
Ping me if you come across any issue.

Enable disabled dropdown with onclick

I have a disabled drop down that I only want enabled after it has been clicked. I have tried several methods, the following being the latest incarnation that doesn't work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<div>
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</div>

$(function() {
$('div > div').on('click', function(event) {
$(this).hide().prev('select:disabled').removeAttr('disabled').focus();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="myForm">
<div style="display:inline-block; position:relative;">
<select name="test" id="testing" disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</form>
</body>
</html>

This will detect the click on it by using CSS to add a layer over the select, but it still is not the best since it still requires more action from the user to open up the options. So it is basically a double click.
var elem = document.querySelector('span.cover');
function listener () {
elem.classList.remove('active');
elem.removeEventListener('mousedown', listener)
var sel = elem.querySelector('select');
sel.removeAttribute('disabled');
sel.focus();
}
elem.addEventListener('mousedown', listener)
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
If you want to do it with jQuery
$(document).on('click','span.active', function(){
$(this).removeClass('active').find('select').removeAttr('disabled');
})
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
<span class="cover active">
<select name="test" id='testing2' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>

Overlay in sidebar but only for one section?

right now I am having a problem. I have created a calculater by myself. Check it out here: https://radlvoo.de/typ/mtb-fully/ (Last element in the sidebar).
If you select some values and click on the button, the overlay shows up but wrong.. the overlay is going over all the sidebar content. But I just want to have to overlay over the last element, the calculator. How can I do this?
This is my form code so far:
<form class="filterform" id="sidebarRahmenhoehenrechner">
<div class="form-group"><label class="control-label">FAHRRADTYP</label>
<select id="fahrradtypHöhenrechner" class="form-control" name="typ">
<option value="">Bitte wählen…</option>
<option value="trekkingrad">TREKKINGRAD</option>
<option value="cityrad">CITYRAD</option>
<option value="mountainbike hardtail">MOUNTAINBIKE HARDTAIL</option>
<option value="mointainbike fully">MOUNTAINBIKE FULLY</option>
<option value="crossrad">CROSSRAD</option>
<option value="rennrad">RENNRAD</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">GESCHLECHT</label>
<select id="geschlechtHöhenrechner" class="form-control" name="geschlecht">
<option value="">Bitte wählen…</option>
<option value="damen">DAMEN</option>
<option value="herren">HERREN</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">FAHRSTYLE</label>
<input name="fahrstyle" type="radio" value="sportlich" /> Sportlich orientiert
<input name="fahrstyle" type="radio" value="touren" /> Touren orientiert
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">SCHRITTHÖHE</label>
<input id="schritthöheInput" min="0" name="schritthöhe" type="number" />
<div class="clearfix"></div>
</div>
<div class="form-group form-group-block" style="margin-top: 20px;"><button id="rahmenhöhenRechnerButton" onclick="rahmenhöhenRechnerMain();" type="button">Rahmenhöhe berechnen</button></div>
<div class="clearfix"></div>
<div id="rahmenhöhenRechnerOverlay" style="position: absolute; display: none; z-index: 500; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.75); overflow: auto;"><div onclick="disableOverlay();" id="closeButtonOverlay">✖</div><div><p id="rahmenhöheAnzeigen"></p></div></div>
<div></div>
</div>
</form>
And this is the overlay code doing:
function disableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "none";
}
function enableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "block";
}
Kind regards

slideUp Div and html columns

I'm trying to accomplish what it appears on the following picture(bottom of the post). I'm just working on the top part where the search fields are. I have several questions;
1) is this the correct why to make columns on html?
2) How can I accomplish to put the icon in the center of the div with that grey line, I tried to put border to the div of the form and puts in a weird place. Also when I add the button with the arrow it puts it all the way to the right. It needs to be always in the center even if i resize the screen
#searchForm{
padding-top: 50px;
margin-left: 18%;
width: 100% !important;
}
.column1{
}
.column2{
}
.column3{
}.column4{
}
.columns{
margin-right: 50px;
maring-left: 50px;
height: 200px;
float: left;
}
.searchValue{
width: 200px;
height: 2.1em;
margin-bottom: 19px;
}
.mySelects{
-webkit-appearance: menulist-button;
height: 2.4em;
width: 200px;
}
.radioButtonsSearch{
margin-bottom: 50px;
}
.btns{
background-color: #14477E;
color: #FFE45E;
width: 150px;
height: 2.4em;
font-weight: bold;
}
.sliderUp{
background-color: #14477E;
color: #FFE45E;
width: 40px;
padding-top: 10px;
height: 2.4em;
font-weight: bold;
font-size: 16px;
position:
margin-left: 60%;
}
<section class="">
<center>
<form id="searchForm">
<div class="column1 columns">
<div class="radioButtonsSearch">
<input type="radio" name="searchType" value="house" checked>House
<input type="radio" name="searchType" value="house">Repair parts<br/>
</div>
Mile Post Number<br/>
<input type="text" name="milePost" class="searchValue" placeHolder="Enter the mile post number" />
</div>
<div class="column2 columns">
Project Number<br>
<input type="text" name="projectNumber" class="searchValue" placeHolder="Enter the project number" /><br/>
Serial Number<br/>
<input type="text" name="serialNumber" class="searchValue" placeHolder="Enter the serial number" /><br/>
<button class="btns">Search</button>
</div>
<div class="column3 columns">
House Size<br/>
<select class=" mySelects searchValue">
<option value="volvo" disabled selected>Select one</option>
<option value="volvo">4x4</option>
<option value="saab">6x6</option>
<option value="opel">8x8</option>
</select><br/>
Start Date<br/>
<input type="text" name="serialNumber" class="searchValue" placeHolder="Enter the serial number" /><br/>
<button type="input" class="btns">Clear</button>
</div>
<div class="column4 columns">
Status<br/>
<select class="searchValue mySelects" style="line-height: 24px;">
<option value="volvo" disabled selected>Select one</option>
<option value="volvo">Hold</option>
<option value="saab">xxx</option>
<option value="opel">xxx</option>
</select><br/>
Asset ID<br/>
<input type="text" name="assetID" class="searchValue" placeHolder="Enter the asset ID" /><br/>
</div>
</form>
<br>
</center>
</section>
<button class="sliderUp">^</button>
here's my demo
This is what I'm trying to accomplish
wireframe
Thanks!

I would look into flexbox for grid layouts. Browser support is growing, and auto prefixers are becoming more and more common.
With flexbox you will be able to easily horizontally and vertically center whatever you want.
Here's a good tutorial to get you started.

1) your columns work perfectly fine for what you are doing. If you don't mind learning new techs try looking at Bootstrap. It is very popular at the moment and will handle screen resizing automatically while allowing break points for moving elements (lets say you are on mobile and want there to be only one column instead of two, you can do that!, although you can always create a mobile specific web page that gets loaded if on mobile.)
2) This probably isn't the best way to do this but you can get the line with your image like such:
<div width=100%>
<hr width=45%; style="display:inline-block">
<button style="display:inline-block" class="sliderUp">^</button>
<hr width=45%; style="display:inline-block">
</div>
Inline styles just for easy viewing.
Hope this helps!

Dynamic Form Submit URL

I have a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.

As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>

Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/