My form contains drop down boxes with options that dynamically change the values of the next drop down box based on the selection.
- When I choose the first training option, the dates are successfully sent through the form to my email address.
- However, if I select the social media workshop or any option below it, the dates come through as 2nd or 18th September, which are the values of the first option and not the ones I have set for the specific label.
The Javascript function <body onload="setup()"> is used like this:
function setup(){
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
for (i = 0; i < selects.length; i++)
{
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
}
CSS:
#socialmedia, #advancedmarketing, #textAreaSearchBox, #firstaid {
display: none;}
HTML Form:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label for="phone">What kind of training?</label>
<select id="searchType" name="training" class="fixed-size-drop">
<option value="intromarketing">Introduction to Marketing</option>
<option value="socialmedia">Social Media Workshop</option>
<option value="advancedmarketing">Advanced Marketing Workshop</option>
<option value="firstaid">First Aid Training</option></select>
<label for="date">Choose your Date:</label>
<select id="intromarketing" name="date" class="fixed-size-drop2">
<option value="2ndsept" name="2ndsept">2nd sept 2014</option>
<option value="18thsept" name="18thsept">18th sept 2014</option></select>
<select id="socialmedia" class="fixed-size-drop2">
<option value="id">11th sept 2014</option>
<option value="18thsept">18th sept 2014</option></select>
<select id="advancedmarketing" class="fixed-size-drop2">
<option value="name">9th sept 2014</option>
<option value="organization">25th sept 2014</option></select>
<select id="firstaid" class="fixed-size-drop2">
<option value="3rdsept" name="3rdsept">3rd September 2014</option>
<option value="16thsept" name="16thsept">16th September 2014</option></select>
<input type="submit" class="ubutton" value="submit">
</form>
Link to the uploaded form:
I have been struggling with this issue for a while, so any help or guidance would be greatly appreciated :)