We Keep Coding

Form validations with js

I'm trying to do validations with js, i have an input and a select, each one has an alert under it, those alerts appear when the input's value is less than 12, and when the user leaves the select empty, and there is a disabled button at the end of the form, it gets enabled if the value of the input == 12 or the select is not null, i tried something for the input only but i can't figure out how to put the select condition in the same function, here is my code:
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

If you need to have the select with a null value selected by default, you have to add one more option in the top. You can add <option selected disabled>Select Something</option>. The disabled attribute will make it unselectable by the user after they click another option.
Then we need to add values to the options. Add an empty value in the default option we added before so it becomes <option selected disabled value="">Select Something</option>. Then, when the field change event fires, you can check the value of the select field and make the magic happen. I have updated your snippet bellow and added the above advice.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
$('#requiredSelect').change(function () {
if ( document.getElementById("requiredSelect").value != "")
{
document.getElementById("requiredSelectAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredSelect").value === "" ) {
document.getElementById("requiredSelectAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option value="" disabled selected>Select something</option>
<option value="hi">Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

This is my version of you request. Using jquery to find the :selected element and get the text into the option tag. Also in each option you can set an value and get the .val() and will works.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12 && $('#requiredSelect').find(":selected").text() != "default")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 && $('#requiredSelect').find(":selected").text() == "default") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>default</option>
<option>hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

You could add to the condition... Something like:
$('#requiredInput').keyup(function () {
if (document.getElementById("requiredInput").value.length == 12 || document.getElementByid("requiredSelect").value != "Hi")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if (document.getElementById("requiredInput").value.length != 12 && document.getElementByid("requiredSelect").value == "Hi") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
and add to your htm:
<select id="requiredSelect">
<option value='Hi'>Hi</option>
<option value='op1'>option 1</option>
<option value='opN'>option N</option>
</select>
On the other hand, you are using jQuery so you could change you code to:
$('#requiredInput').keyup(function () {
if ($("#requiredInput").val().length == 12 || $("#requiredSelect").val() != "Hi")
{
$("#requiredAlert").css("display" : "none");
$("#disabledButton")prop("disabled", false);
} else if ($("#requiredInput").val().length != 12 && $("#requiredSelect").val() == "Hi") {
$("#requiredAlert")css("display" : 'block');
$("#disabledButton")prop("disabled", true);
}
});

show and hide div depending upon selected checkbox with combobox option

I have used this multiselect checkbox with a combobox option..
JsFiddle
In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?
Without Combobox Fiddle
Javascript
document.getElementById("option_1").onclick = function() {
if(this.checked)
document.getElementById('choose_the_correct_answer').style.display = "block";
else
document.getElementById('choose_the_correct_answer').style.display = "none";
}
I have tried this Jquery code too
$(document).ready(function(){
$('#option_1').on('change', function() {
if ( this.value == '1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
HTML
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option id="option_1" value="option_1">Choose the Correct Answer</option>
<option id="option_2" value="option_2">Fill in the Blanks</option>
<option id="option_3" value="option_3">True or False</option>
<option id="option_4" value="option_4">Match the Following</option>
<option id="option_5" value="option_5">Two Mark Questions</option>
<option id="option_6" value="option_6">Five Mark Questions</option>
<option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>

try
$('#option_1').on('click', function() {
});
and
the condition should be
if ( this.value == 'option_1')
JSFIDDLE
$(document).ready(function(){
$('#option_1').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
UPDATE:
AND a better option will be to use .togggle() if you intend to use multiselect
UPDATED DEMO
JS:
$(document).ready(function(){
$('option').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").toggle();
}
else if ( this.value == 'option_2')
{
$("#fill_in_the_blanks").toggle();
}
else if ( this.value == 'option_3')
{
$("#true_or_false").toggle();
}
else if ( this.value == 'option_4')
{
$("#match_the_following").toggle();
}
else if ( this.value == 'option_5')
{
$("#two_mark_questions").toggle();
}
else if ( this.value == 'option_6')
{
$("#five_mark_qustions").toggle();
}
else if ( this.value == 'option_7')
{
$("#others").toggle();
}
});
});
New Update: using normal dropdown with multiselect
use
$('select').on('change', function() {
FIDDLE

How can I create a javascript to show and hide info according option value selected?

I'm trying to create a combobox to show moths, when I do click on january I only need to see div1 and febraury need to see div 2 like this:
January........
<div> It will show info when only january is selected</div>
Febraury........
<div> It will show info when only febraury is selected</div>
Here is my information:
<select id="month" name="month">
<option value="1">January</option>
<option value="2">Febraury</option>
<option value="3">March</option>
</select>
<-------ALL MY DIVS WILL BE HIDE -------------->
<div> It will show info when only january is selected</div>
<div> It will show info when only Febraury is selected</div>
<div> It will show info when only March is selected</div>
<----- It should show each div according option div is selected ----->
Here is my demo
http://jsfiddle.net/q2E5e/
Please somebody can help me with this?
I will really appreciate help

FIDDLE
You need to give id to your div, then use:
divJan.style.display = "block";
block will show your div, none will hide it.
You just need a function that will determine wich element is selected and an event to track the changes. Here's an example:
var cmbMonth = document.getElementById('month');
var divJan = document.getElementById('divJan');
var divFeb = document.getElementById('divFeb');
var divCoo = document.getElementById('divCoo');
cmbMonth.addEventListener('change', function (e) {
if (cmbMonth.value == 1) {
divJan.style.display = "block";
divFeb.style.display = "none";
divCoo.style.display = "none";
} else if (cmbMonth.value == 2) {
divJan.style.display = "none";
divFeb.style.display = "block";
divCoo.style.display = "none";
} else if (cmbMonth.value == 3) {
divJan.style.display = "none";
divFeb.style.display = "none";
divCoo.style.display = "block";
}
});

A jQuery solution using
$('#month').change()
and
$(some id).hide()
JSFiddle

At first, instead of hidden div elements with text, would be better if you create an array with text values, that should be shown after selecting appropriate values.
var divTextValues = [
"You selected January",
"You selected February",
"You selected March",
];
Second, for simplicity start values of dropdown list from 0.
<select id="month" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
Third, hide div element by default.
<div id="displayMonth" style="display:none;"></div>
And then add event handler.
var month = document.getElementById("month"),
displayMonth = document.getElementById("displayMonth");
month.addEventListener("change", function (e) {
var selected = this[this.selectedIndex];
if (selected.value > -1) {
displayMonth.textContent = divTextValues[selected.value];
displayMonth.style.display = "block";
} else {
displayMonth.style.display = "none";
}
});
Demonstration

Dropdownlist Onchange Show other Dropdownlist

My problem is I want to create a category selecting system with javascript but when I choose an option it displays all divs; it should show only one div.
For example : if value = emlak then show div id=emlak
JS
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value = 'emlak'){
document.getElementById("emlak").style.display = "block";
}
if(value = 'vasita'){
document.getElementById("vasita").style.display = "block";
}
}
HTML
<select name="kategori" onChange="getData(this);">
<option value="hat" onClick="">Hat</option>
<option value="emlak">Shirt</option>
<option value="vasita">Pants</option>
</select>
<select id="emlak" name="currentList" onChange=";" style="display:none;">
<option value="hat">Hat</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>
<select id="vasita" name="currentList" onChange="" style="display:none;">
<option value="hat">Otomobil</option>
<option value="emlak">Shirt</option>
<option value="pants">Pants</option>
</select>

Try this, Your problem is in if condition your are not using ==
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'emlak'){
document.getElementById("emlak").style.display = "block";
document.getElementById("vasita").style.display = "none";
}
if(value == 'vasita'){
document.getElementById("vasita").style.display = "block";
document.getElementById("emlak").style.display = "none";
}
}
Demo
Update Demo

JavaScript function to change div, based on option selected - doesn't always work as expected?

I have a JavaScript function (picture), which is activated when the visitor selects an option (onchange) from the drop down menu (picture_type), which then changes the data within the div (picture_div).
However not always does the data within the div reflect the chosen option, e.g: If you select the 'Select' option...then select the 'URL' option, the div doesn't reflect what should be their for the 'URL'.
Heres the JavaScript function along with the appropriate HTML:
<script>
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
If you don't understand me, I suggest you test the above code and play with the options to understand me better. :)
All help is greatly appreciated!.

Here is the code ,Try this out
<html>
<head>
<script>
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
if(picture_type == 1) {
document.getElementById('picture_div').innerHTML = 'URL: <input name="url" type="text" style="width: 100%" />';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}
</script>
</head>
<body>
<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>
<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
</body>
</html>
with regards,
Wazzy

I think there are some inconsistencies in the code.
You are changing the contents of the picture_div only when the option URL is selected, but the div is displayed when either URL or Select is selected.
I think you need to change the value of the picture_div if the Select option is selected.
Actually what is the requirement here? Whether the picture_div has to be displayed while URL or Select options are selected? If that is the case then you have to check the condition
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}
because this condition handles only the Select case. You've to handle the case when the value is 1 (URL) also.
Try this
function picture() {
var picture_type = document.getElementById('picture_type').value;
if (picture_type == 2) {
document.getElementById('picture_div').innerHTML = 'Click here to select one.';
}else if(picture_type == 1){
document.getElementById('picture_div').innerHTML = 'Option url';
}
if (picture_type >= 1) {
document.getElementById('picture_div').style.display = 'block';
} else {
document.getElementById('picture_div').style.display = 'none';
}
}