Develop Reference

How to get Select Option working with disable and enable submit button

I have a form with textarea, input type: text, radio and checkbox. Also it has select option and disable submit button at first.
An idea is if all fields are filled in then the submit button will be enable.
Everything is working as expected, but it seems like my code ignores select option. That means the submit button is enable before I do select option.
Below is my code for select option:
var pickOne = $('#pickone option:selected').length === 0;
if (pickOne) {
console.log("pickOne: " + pickOne);
filled = false;
}
I wonder if I miss something. Please take a look at my sample in jsfiddle
HTML
<form action="" method="post" id="subnewtopicform" />Title:
<input type="text" name="title"> <br />
Name:
<input type="text" name="name">
<br/>Description:
<textarea name="description"></textarea>
<br/>Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19">
<label class="selectit">
<input type="radio" id="in-category-19" name="category" value="19">Animation</label>
</li>
<li id="category-20">
<label class="selectit">
<input type="radio" id="in-category-20" name="category" value="20">Anime</label>
</li>
</ul>
<div class="fieldText" id="multi-select">
<lable>
<input class="item" name="item1" type="checkbox">Item 1
</lable>
<lable>
<input class="item" name="item2" type="checkbox">Item 2
</lable>
</div>
<p>
<select name="pickone" id= "pickone" required>
<option selected="selected" value="">Select one</option>
<option value="a">aktif</option>
<option value="l">terkunci</option>
<option value="b">blokir</option>
</select>
</p>
<input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" />
</form>
JS
//function check() {
$('#subnewtopicform').on("keyup change", function() {
var inputs = $("input");
var textareas = $("textarea");
var filled = true;
var oneChecked = false;
var multiChecked = false;
//var pickOne = $('#pickone option:selected').length === 0;
//var pickOne = false;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "text" && !inputs[i].value) {
filled = false;
}
if (inputs[i].type === "radio" && inputs[i].checked) {
oneChecked = true;
}
if (inputs[i].type === "checkbox" && inputs[i].checked) {
multiChecked = true;
}
}
if (!oneChecked) {
filled = false;
}
if (!multiChecked) {
filled = false;
}
var pickOne = $('#pickone option:selected').length === 0;
if (pickOne) {
console.log("pickOne: " + pickOne);
filled = false;
}
for (var j = 0; j < textareas.length; j++) {
if (!textareas[j].value) {
filled = false;
}
}
if (filled) {
$("#subnewtopic").removeAttr('disabled');
} else {
$("#subnewtopic").prop('disabled', 'disabled');
}
}
)
/* window.addEventListener("keyup", check);
window.addEventListener("click", check); */

but it seems like my code ignores select option
No. Your code is not ignoring the select option.
<select name="pickone" id= "pickone" required>
<option selected="selected" value="">Select one</option> //This is selected by default
<option value="a">aktif</option>
<option value="l">terkunci</option>
<option value="b">blokir</option>
</select>
"Select one" is a valid option and is selected by default, so this code:
$('#pickone option:selected').length
Will return 1 even if "Select one" is the selected option.
In my opinion the best thing you can do is validate the select by it's value being !== '' considering that's the value of "Select one" option which are your "invalid" option.

how will i enabled button when two textbox is equal

i tried this codes but it seems not working. my problem is how will i enabled the button when the two textbox is equal the value? the selected textbox is automatic will change depend on the quanity of item selected in multiple select.
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function getCount(){
var comboBoxes = document.querySelectorAll("#tags");
var selected = [];
for(var i=0,len=comboBoxes.length;i<len;i++){
var combo = comboBoxes[i];
var options = combo.children;
for(var j=0,length=options.length;j<length;j++){
var option = options[j];
if(option.selected){
selected.push(option.text);
}
}
}
$('#selected').val(selected.length);;
}
</script>
<script>
function disableSubmit(){
var firstValue = $("#quantitytotransfer").val();
var secondValue = $("#selected").val();
if ((firstValue == secondValue)) {
$("#submit").attr("disabled", false);
}else{
$("#submit").attr("disabled", true);
}
}
$("#selected").on("keyup", disableSubmit);
$("#quantitytotransfer").on("keyup", disableSubmit);
</script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" onchange="getCount()"multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>
<script>
</script>

It's very easy here is the code
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" disabled type="button">Get Values</button>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$(function() {
$("#tags").on("change", function(e) {//Whenever tags are changed it will be called
$('#selected').val($(this).find('option').filter(":selected").length);//this will set the count or length of selected length
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
});
var delay = (function() {// a delay function
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#quantitytotransfer, #selected').keyup(function() {//both text box are binded to event
delay(function() {
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
}, 1000 );//a 1 second delay used you can change to more less
});
});

You can compare value entered in input tag and selected from select tag in the following way:
Here how does it work:
Listen to input on input.
Listen to change on select tag.
When user enter a value in input, run logic enable button.
When user select a value in select, run logic enable button.
Logic enable button, compare value entered and selected from input and select tag. If both values match, button is enabled otherwise is disabled.
When a value change on select tag, show value in read-only input tag/
(function() {
var elmQuantity = $('#quantitytotransfer'),
elmTags = $('#tags'),
elmSubmit = $('#submit'),
elmSelected = $('#selected'),
findTagsSelected = function() {
return elmTags.find(':selected').text();
},
enableBtn = function() {
if (elmQuantity.val() === findTagsSelected()) {
elmSubmit.prop('disabled', false)
} else {
elmSubmit.prop('disabled', true)
}
};
elmQuantity.on('input', function() {
enableBtn();
}),
elmTags.change(function(value) {
enableBtn();
elmSelected.val(findTagsSelected());
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>

Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>

So the solution was to delete return false; from the function.

Checkbox and Select Options update a Total Value

I have to create a small calculator form by using checkboxes and a select field.
If the user clicks on two checkboxes the select field will update to the option 2 and the total will update to a total figure of 456
Here is my HTML
<div>
<label for="one">1</label>
<input type="checkbox" name="1" id="1" value="228" />
</div>
<div>
<label for="two">2</label>
<input type="checkbox" name="2" id="2" value="228" />
</div>
<div>
<label for="three">3</label>
<input type="checkbox" name="3" id="3" value="228" />
</div>
<div>
<label for="four">4</label>
<input type="checkbox" name="4" id="4" value="228" />
</div>
<div>
<label for="five">5</label>
<input type="checkbox" name="5" id="5" value="228" />
</div>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" name="Total" value="Total">
Here is a fiddle - http://jsfiddle.net/barrycorrigan/se21b1p6/1/
I'm just not sure how to create this in jquery. Any help will be greatly appreciated.
Thanks

this works:
$(function() {
var total = $("input[name='Total']");
var checkBox = $("input[type='checkbox']");
var _select = $("select");
checkBox.click(function(){
checkBox.prop("checked", false);
var _index = $(this).attr("id")
total.val(_index * 228);
_select.val(_index);
checkBox.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select.change(function() {
checkBox.prop("checked", false);
var _val = $(this).val();
total.val(_val * 228);
checkBox.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
});
You can see it in the fiddle: http://jsfiddle.net/yuanzm/se21b1p6/6/

you can try with this also
var countChecked = function() {
var n = $( "input:checked" ).length;
$('select >option:eq('+ n +')').prop('selected', true);
sum();
};
countChecked();
function sum() {
var inputs = $('input[type=checkbox]:checked'),
result = $('#total'),
sum = 0;
for(var i=0; i< $('input[type=checkbox]:checked').length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}
}
$(result).val(sum);
}
$( "input[type=checkbox]" ).on( "click", countChecked );
http://jsfiddle.net/amolks/yfat78rL/

Restrict radio button display, javascript

I have a dropdown list. when clicking one of the items, it should display radio button to display.
I got till here. Now the question is
I have 4 radio buttons. I want to display 2 options and hide 2 options. in javascript.
How do I do this?

you can do this with jquery
$(function() {
$('#dropdownId').change(function() { //when the dropdown change
var selectValue = $(this).val(); //Get it's value
if (selectValue == 1) {
$("#radioButtonId1").show();
$("#radioButtonId2").show();
$("#radioButtonId3").hide();
$("#radioButtonId4").hide();
}
});
}
you can also use data on your Options to get options need to be displayed :
<input type = "radio" class="DependOnSelect" data-showonid="1,3,5" />
<input type = "radio" class="DependOnSelect" data-showonid="2,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="1,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="2,3,5" />
$(function() {
$('#dropdownId').change(function() {
var selectValue = $(this).val();
if (selectValue == 1) {
$('.DependOnSelect').each(function() { //for each Options
var splited = $(this).data("showonid").split(',');
if (jQuery.inArray(selectValue, splited) > -1)
$(this).show(); // if the data-showonid contains the id, show it
else
$(this).hide();
});
}
});
}
JSFIDLE
to disable element in jquery:
$('#ElementId').attr("disabled", "disabled);
to enable it :
$('#ElementId').removeAttr("disabled");
in pure Javascript:
Html:
<select id="dropdownId" onChange="jsFunction()">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<br/>
<input type="radio" name="option" id="option1" />1
<br/>
<input type="radio" name="option" id="option2" />2
<br/>
<input type="radio" name="option" id="option3" />3
<br/>
<input type="radio" name="option" id="option4" />4
<br/>
javascript:
function jsFunction() {
var myselect = document.getElementById("dropdownId");
var value = myselect.options[myselect.selectedIndex].value;
if (value == 1) {
document.getElementById('option1').disabled = 'disabled';
} else {
document.getElementById('option1').disabled = '';
}
if (value == 2) {
document.getElementById('option2').disabled = 'disabled';
} else {
document.getElementById('option2').disabled = '';
}
if (value == 3) {
document.getElementById('option3').disabled = 'disabled';
} else {
document.getElementById('option3').disabled = '';
}
if (value == 4) {
document.getElementById('option4').disabled = 'disabled';
} else {
document.getElementById('option4').disabled = '';
}
}
JSFIDLE

Hi you can disable any particular option by using "disabled"
<input type="radio" name="someName" value="someValue" id="someId" disabled>
Then get the two options you want to hide and make display = "none";