Hi, I'm very new to JS and trying to learn. Currently I'm trying to make a form validation for my website. What happends in the code below is that when you select an option from a drop down select field, it creates a new list item inside a ul list. I got everything to work except one thing. How many list items you can create. I simply want to restrict the user from selecting more than 3 options from the drop down menu. If you select a 4th option an alert message should pop up but I can't get it to work..
Here's the JS code:
function selectGenres(select){
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName('ul')[0];
var choices = ul.getElementsByTagName('input');
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value) {
alert("The genre is already selected!");
return false;
}
else if (option == 3) {
alert("You can only select 3 genres!");
return false;
}
var li = document.createElement('li');
var input = document.createElement('input');
var text = document.createTextNode(option.firstChild.data);
input.type = 'hidden';
input.name = 'ingredients[]';
input.value = option.value;
li.appendChild(input);
li.appendChild(text);
li.setAttribute('onclick', 'this.parentNode.removeChild(this);');
ul.appendChild(li);
}
And here is the form to validate:
<form name="form1" id="main_form" action="index.php" method="post">
<input id="btn" name="btn" value="Submit" type="submit" />
<div id="form_con">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
<ul>
</ul>
<select id="genre_settings" onchange="selectGenres(this);">
<option disabled="disabled">Genre...</option>
<option value="01">Animation</option>
<option value="02">Action</option>
<option value="03">Adventure</option>
<option value="04">Animals</option>
<option value="05">Comedy</option>
...
</select>
</td>
</tr>
</table>
</div>
</form>