my cascading combo boxes are sending wrong values - javascript

I have a from with drop down boxes with options, which once selected will change the values of the next drop down box.
If i select the first training option, both dates are sent through the form to my email address just fine.
But if i select the social media workshop or any below, the dates come through as the 2nd or 18th September, which are the values of the first option and not the ones that I have set for this particular label.
I call this <body onload="setup()"> Javascript:
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 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>
Here is the uploaded form: http://coffeemachines4u.co.uk/test-form.php
I have been scratching my head for a few hours so if anybody could point me in the right direction i would be extremely thankful :)

Its because of the name-attribute in of your selectboxes. Only the first select has the name date. If this is invisible it is also there and because of this the form send the date parameter from the date. You can change the name attribute and the vivible of your selectboxes on same time
use this JavaScrip
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
selects[i].removeAttribute('name');
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById(select2).name = 'date';
document.getElementById('textAreaSearchBox').style.display = 'block';

Update the name of the four dynamic select elements with: name="date".
On select#searchType change, you need to disable / enable (DOM element property) the corresponding select(s).

Related

How to get a dropbox to show options in another dropbox

I was thinking if it's possible to let a select dropdown box deside which options there will be in another select dropbox.
For example, i would like to have a checkbox, if that's checked a dropbox will appear. And when choosing an option i that dropbox, a new dropbox would appear.
Then if i have choosed days, in the first dropbox, then i would be able to choose between all days of the week in the new dropbox.
Then if i choose weeks, in the first dropbox, then i would be able to choose between all weeks numbers in the new dropbox.
And so on..
I have tried to google it, but without any luck. The first part with the checkbox and getting the frist dropbox appears is easy enough, but the last part, not so much for me.
Sorry if my english is bad and my question is a little hard to understand.
Edit:
<script>
function showSelect() {
var checkBox = document.getElementById("checked");
var select = document.getElementById("select");
if (checkBox.checked == true){
select.style.display = "block";
} else {
select.style.display = "none";
}
}
</script>
Rot: <input type="checkbox" id="checked" onclick="showSelect()">
<select id="select" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Days</option>
<option value="2">Week</option>
</select>
You can do that by listening for a change event on the first select drop down list. Once you get the selected value, you can use it with another if statement to display the next select list. Try this:
function showSelect() {
var checkBox = document.getElementById("checked");
var select = document.getElementById("select");
if (checkBox.checked == true){
select.style.display = "block";
} else {
select.style.display = "none";
}
}
var daysWeeks = document.getElementById('select'),
days = document.getElementById('select-days'),
weeks = document.getElementById('select-weeks');
daysWeeks.addEventListener('change', function() {
var newSelect = daysWeeks.options[daysWeeks.selectedIndex].value;
days.style.display = 'none';
weeks.style.display = 'none';
if (newSelect === '1') {
days.style.display = 'block';
} else if (newSelect === '2') {
weeks.style.display = 'block';
}
});
Rot: <input type="checkbox" id="checked" onclick="showSelect()">
<select id="select" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Days</option>
<option value="2">Week</option>
</select>
<select id="select-days" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Day1</option>
<option value="2">Day2</option>
</select>
<select id="select-weeks" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Week1</option>
<option value="2">Week2</option>
</select>

Two Drop down menu's when "other" is selected in either dropdown open a text box

I need two drop down menu's that when "other is selected from either menu a text box appears to allow the user to type their answer.
I can create both drop down menu's and can get one of them to open a text box but I can't seem to get both to complete the same action. I have tried many options and can't get it to work. Can anyone please help.
Thank you
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('association');
var optOtherReason = document.getElementById('association_detail');
eSelect.onchange = function() {
if(eSelect.selectedIndex === 5) {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
</script>
</head>
<body>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "association" name="association" >
<option value="na">Select:</option>
<option value="AR">Academic Research</option>
<option value="EM">Emergency Management</option>
<option value="EV">Equipment Vender</option>
<option value="RB">Re-broadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="association_detail" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "select_use" name="select_use" >
<option value="na">Select:</option>
<option value="sat">Satellite</option>
<option value="int">Internet</option>
<option value="vhf">VHF Radio Rebroadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="Use" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
</body>
</html>
A few issues I noticed:
Your "other" text boxes both have the same id/name; this does not conform the HTML standard. You need to ensure each element has a unique id.
You're only listening to eSelect changes; if you want to also toggle the visibility of the Use div, you'll need to listen to when the select-use changes (ie you need to construct another handler).
You'll need to get the second select box (id="select_use") and add another onchange handler to it. In this second onchange handler, you will need to select your second textbox (id="use") to show/hide it.
Here is an updated version of your code:
var eSelect = document.getElementById('association');
var eSelect2 = document.getElementById('select_use');
var optOtherReason = document.getElementById('association_detail');
var optOtherReason2 = document.getElementById('Use');
eSelect.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
eSelect2.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason2.style.display = 'block';
} else {
optOtherReason2.style.display = 'none';
}
}
Try it here: https://jsfiddle.net/ve9fg0tc/2/
Also in your onchange handler, it would be better to show/hide your textbox based on the selected value ('other') rather than the index. This is because you may add/remove more items in your menu in the future so the index will change and the condition won't work anymore.

how do I show all the selected options in the text field

how do I get my javascript to show more than one selected in de text field I am planning on adding way more 's so I don't want to make a insane long array
function myFunction() {
var skilllist = document.getElementById("skilllist");
console.log(skilllist.selectedIndex);
document.getElementById("skillfield").value = skilllist.options[skilllist.selectedIndex].text;
}
<form>
Select your favorite browser:
<select name="skillist[]" id="skilllist" multiple>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
<option value="Laravel">Laravel</option>
<option value="Wordpress">wordpress</option>
</select>
<p>jouw skills zijn: <input type="text" id="skillfield" size="50"></p>
</form>
</div>
I suggest adding an event handler on blur event to the select element.
With such an approach you are able to select one or more list items and dynamically render their text content.
document.getElementById("skilllist").addEventListener('blur', function(e){
var options = e.target.options,
selected_content = "";
for (var i = 0; i < options.length; i++) {
if (options[i].selected) selected_content += options[i].textContent + ", ";
}
document.getElementById("skillfield").value = selected_content;
});
https://jsfiddle.net/zLyw7vhd/
For mobile devices : try to replace event name 'blur' to 'focusout'
(or 'change') in addEventListener function

enable or disable option from select

I am trying to make an option either selectable OR non-selectable based on whether or not they chose another option. For example, if there is options 1-6 and they have NOT chosen option 1 in their first select box, then in that SAME select box and any other in the form, then option 6 could NOT be chosen.
I looked around, but everything is about clicking a button to achieve this.
This is the code I have (I have also tried onclick)
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect2");
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect2");
x.disabled=false
}</script>
<form>
<select class="mySelect" id="mySelect">
<option onchange="makeEnable()" value="Enable list">Apple</option>
<option onchange="makeDisable()" value="Disable list">Banana</option>
<option id="mySelect2" disabled="true">Orange</option>
</select>
</form>
Option elements don't have event "onchange", but Select elements do.
I've quickly wrote a code snippet below. You may add more select items. When you choose an option in one of those select elements, you shouldn't choose options at same index in other select elements.
function toggleDisability(selectElement) {
//Getting all select elements
var arraySelects = document.getElementsByClassName('mySelect');
//Getting selected index
var selectedOption = selectElement.selectedIndex;
//Disabling options at same index in other select elements
for (var i = 0; i < arraySelects.length; i++) {
if (arraySelects[i] == selectElement)
continue; //Passing the selected Select Element
arraySelects[i].options[selectedOption].disabled = true;
}
}
<form>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
<option>Hamburger</option>
<option>Pizza</option>
<option>Cola</option>
</select>
</form>

Automatic form fill using javascript

here is my code:
function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>
<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>
<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">
</form>
<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
<option id = "selectedMonth" selected="selected" value=""></option>
</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>
I used simple javascript to automatically fill the form inputs "entryDate, selectedYear, selectedMonth" by actual date and some other dates used by the further scripts.
My problem is, that when the site is loaded, only first input is automatically filled - the input with id = entryDate.
The next 2 inputs are empty. But, when I press F5 and the site is reloaded again, the 2 inputs are filled correctly.
Could you please help me fix it to have all 3 forms filled when the site is loaded for the first time...
Thank you
You are not using <select> and <option> correctly. <select> represents a dropdown, which can contain multiple <option> elements.
An <option> element represents an option in the dropdown. You close an <option> with </option>. Whatever is BETWEEN the tags will appear in the dropdown:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
On the other hand, an <option>'s value attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the <option>: the user won't see it, but it's the one that matters. Whatever is between <option> and </option> is visible by the user, but doesn't actually DO anything.
Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a selected attribute set to selected (selected="selected"). When a user chooses an option, this attribute gets set automatically (and the selected attribute on the other options gets cleared).
So first of all, let's get your selectedYear dropdown looking right. You'll need to manually provide some years as options:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
Note that you need to specify the year both between the tags AND in each <option>'s value attribute, as explained above. Also note that I moved the id to the <select>. There's rarely a reason to select an individual <option> of a <select>; typically to modify a dropdown's options, you should select the <select> tag itself.
So, let's try that. I'll re-create the dropdown above, but I'll add its options using JavaScript:
<select id="selectedYear" name="year"></select>
<script type="text/javascript">
var dropdown = document.getElementById('selectedYear');
var start_year = 2011;
var end_year = 2013;
for (var i = start_year; i <= end_year; i++) {
dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
</script>
The innerHTML function lets you set the HTML content between an element's opening tag (in this case <select id="selectedYear" name="year"> and closing tag (</select>).
Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the selected attribute of the <option> to "selected". Here's a portion of your setActualDate function, showing how to set the default year for just the selectedYear dropdown:
<script type="text/javascript>
function setActualDate() {
var d1 = new Date();
var year = d1.getFullYear();
var dropdown = document.getElementById('selectedYear');
//loop through the dropdown's options
for (var i = 0; i < dropdown.options.length; i++) {
var option = dropdown.options[i];
//check if this is the option we want to set
if (option.value == year) {
option.selected = true;
} else {
//ensure all other options are NOT selected
option.selected = false;
}
//NOTE: you can simplify the above if-else to just:
//option.selected = (option.value == year);
}
}
</script>
That should be enough to get you started. I hope it all makes sense.
Use the following HTML for month -
<!-- HTML for month -->
<select id = "selectedMonth" name="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<!-- HTML for year -->
<select id="selectedYear" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
and script
//script for setting month
var monthEl = document.getElementById('selectedMonth');
monthEl.options[m2].selected = "selected"
//for year
var yearEl = document.getElementById('selectedYear');
yearEl.options[y].selected = "selected"
You are getting the elements by their ID so the first time the script runs only fills out the first elements it finds (probably the ones in the first form).
Since you have several elements to fill out automatically, you should be setting classes to on them and use these classes to select the ones you are interested in. For example:
<form id="form1">
<input class="entryDate" type="text"> <!-- note the class=..." -->
</form>
<form id="form2">
<input class="entryDate" type="text">
<select name="mode" class="selectedMonth"> <!-- note the class=..." -->
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
</form>
Now your code should be something like this:
window.onload = function setActualDate() {
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
var entryDates = document.getElementsByClassName('entryDate');
var years = document.getElementsByClassName('selectedYear');
var months = document.getElementsByClassName('selectedMonth');
var i, j;
for (i in entryDates)
entryDates[i].value = (y + "-" + m1 + "-" + d);
for (i in months) {
for (j in months[i].options)
if (months[i].options[j].value == m1) {
months[i].options[j].selected = true;
break;
}
}
//similarly for years...
};
Here's a fiddle demonstrating it: http://jsfiddle.net/QDdAp/2/

Categories