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";
Related
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.
I have 3 links they fill the selectfield with different option. If are the textlabel is active and somebody click the link selectlist1 or other it must activate the selectlabel. How i can do that?
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1":{
"100":"select100", // selectdaten
"101":"select101",
"102":"select102",
"103":"select103",
"104":"select104"
},
"sel2":{
"201":"select201",
"202":"select202",
"203":"select203",
"204":"select204",
"205":"select205"
},
"sel3":{
"301":"select301",
"302":"select302",
"303":"select303",
"304":"select304",
"305":"select305"
}
};
jQuery(document).ready(function ($) {
$(document).on('click', '.selectin', function (event) {
event.preventDefault();
var b = $(this),
buttonId=b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if(selectSet){
$.each(selectSet,function(k,v){
selectField.append($('<option>', {value:k, text:v}));
});
}
return false;
});
});
</script>
<li>Selectlist1</li>
<li>Selectlist2</li>
<li>Selectlist3</li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
}
else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>
I have 3 links they fill the selectfield with different option. If are the textlabel is active and somebody click the link selectlist1 or other it must activate the selectlabel. How i can do that?
Insert this code on your selectin click;
var radio2 = document.getElementById('radio2');
if(radio2.checked == false){
radio2.checked = true;
toggleRadio();
}
This would check if radio2 is checked, if not, it will toggle it and call your function for displaying the select fields. Run the snippet, thanks.
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1": {
"100": "select100", // selectdaten
"101": "select101",
"102": "select102",
"103": "select103",
"104": "select104"
},
"sel2": {
"201": "select201",
"202": "select202",
"203": "select203",
"204": "select204",
"205": "select205"
},
"sel3": {
"301": "select301",
"302": "select302",
"303": "select303",
"304": "select304",
"305": "select305"
}
};
jQuery(document).ready(function($) {
$(document).on('click', '.selectin', function(event) {
var radio2 = document.getElementById('radio2');
if (radio2.checked == false) {
radio2.checked = true;
toggleRadio();
}
event.preventDefault();
var b = $(this),
buttonId = b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if (selectSet) {
$.each(selectSet, function(k, v) {
selectField.append($('<option>', {
value: k,
text: v
}));
});
}
return false;
});
});
</script>
<li>Selectlist1</li>
<li>Selectlist2</li>
<li>Selectlist3</li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
} else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>
I am displaying some check boxes. The user can check a maximum of 4 boxes. I store the checked value in 4 textboxes.
My problem: How can I correctly store the "new" checked value when the user randomly unchecks one box and checks another?
I store values as follows: First checked into item_1, second checked into item_2, third checked into item_3 ... If the user unchecks the first checked box, for example, how can I store the value of the next box he or she checks into item_1? Please help.
Simplified code
<input type="checkbox" name="prodname_1" id="prodname_1"value="1"/>
<input type="checkbox" name="prodname_2" id="prodname_2"value="2"/>
<input type="checkbox" name="prodname_3" id="prodname_3"value="3"/>
.
.
<input type="checkbox" name="prodname_10" id="prodname_10"value="10"/>
<input type="text" name="item_0" id="item_0"value=""/>
<input type="text" name="item_1" id="item_1"value=""/>
<input type="text" name="item_2" id="item_2"value=""/>
<input type="text" name="item_3" id="item_3"value=""/>
$(document).ready(function (e)
{
counter=0;
$('input[id^="prodname_"]').change(function()
{
id = $(this).attr('id');
var arr = id.split('_');
valueChecked=$('#'+id).val();
if(this.checked)
{
if(counter==4)
{
alert('Allready checked 4 items');
this.checked=false;
return false;
}
$("#item_"+counter).val(valueChecked);
++counter;
}
});
});
Instead of retaining a counter, just count the number of checked boxes when the change occurs.
Revised to use the logic you intended (took a little while to figure that out) :)
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tmLnbvv0/9/
$(document).ready(function (e) {
var $items = $('input[id^="item_"]');
var checkboxes = $('input[id ^= "prodname_"]').change(function () {
var id = $(this).attr('id');
var arr = id.split('_');
valueChecked = $(this).val();
// Count of checked checkboxes
var counter = checkboxes.filter(':checked').length;
if ($(this).is(':checked')) {
// count the checked checkboxes
if (counter > 4) {
alert('Already checked 4 items');
$(this).prop('checked', false);
} else {
// Add to the first available slot
$items.filter(function(){return $(this).val() == ""}).first().val(valueChecked);
}
} else {
// Remove the matching value
$items.filter(function(){return $(this).val() == valueChecked;}).first().val('');
}
});
});
note: The "jQuery way" for changing checkboxes is to use prop('checked', booleanvalue) (also changed above)
V2 - If you don't want gaps:
This version is actually simpler as it just clears the items and fills them, in order, with any checked checkbox values.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/tmLnbvv0/13/
$(document).ready(function (e) {
var $items = $('input[id^="item_"]');
var $checkboxes = $('input[id ^= "prodname_"]').change(function () {
// Count of checked checkboxes
var counter = $checkboxes.filter(':checked').length;
// count the checked checkboxes
if (counter > 4) {
alert('Already checked 4 items');
$(this).prop('checked', false);
}
// Clear all the items
$items.val('');
// Fill the items with the selected values
var item = 0;
$checkboxes.filter(':checked').each(function () {
$('#item_' + (item++)).val($(this).val());
});
});
});
Look at
$(document).ready(function(e) {
var counter = 0,
$items = $('input[name^="item_"]');
$('input[id^="prodname_"]').change(function() {
var id = this;
if (this.checked) {
if (counter == 4) {
this.checked = false;
return;
}
$("#item_" + counter).val(this.value).attr('data-value', this.value);
++counter;
} else {
var $item = $items.filter('[data-value="' + this.value + '"]');
var index = $items.index($item);
$items.slice(index, counter).each(function(i) {
var $n = $items.eq(index + i + 1);
$(this).val($n.val() || '').attr('data-value', $n.attr('data-value'));
});
counter--;
$("#item_" + counter).val('').removeAttr('data-value');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="prodname_1" id="prodname_1" value="1" />
<input type="checkbox" name="prodname_2" id="prodname_2" value="2" />
<input type="checkbox" name="prodname_3" id="prodname_3" value="3" />
<input type="checkbox" name="prodname_4" id="prodname_4" value="4" />
<input type="checkbox" name="prodname_5" id="prodname_5" value="5" />
<input type="checkbox" name="prodname_6" id="prodname_6" value="6" />
<input type="checkbox" name="prodname_7" id="prodname_7" value="7" />
<input type="checkbox" name="prodname_8" id="prodname_8" value="8" />
<input type="checkbox" name="prodname_9" id="prodname_9" value="9" />
<input type="checkbox" name="prodname_10" id="prodname_10" value="10" />
<input type="text" name="item_0" id="item_0" value="" />
<input type="text" name="item_1" id="item_1" value="" />
<input type="text" name="item_2" id="item_2" value="" />
<input type="text" name="item_3" id="item_3" value="" />
I have many server input checkboxes. I have given the first checkbox the id all. By default it will be checked. When the user checks other checkboxes, then checkbox with id all will be unchecked. And if all is checked other checkboxes will be unchecked. For this to happen i made the code but nothing is happening.
Here is what i have tried.
<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check()" checked/>ALL <br/>
<input type="checkbox" id="servers" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" id="servers" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" id="servers" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" id="servers" value="amp" name="server[]" onChange="check()" />AMP <br/>
</form>
function check(){
var all = document.getElementById("all"),
group = document.getElementById("servers");
if(all.checked == true){
group.checked == false;
}elseif(group.checked == true){
all.checked == false;
}
}
I wanted my code to work like THIS.
I dont want to use jQuery for some reasons. So i need my code to be in pure JS.
Any help will be appreciated.
You can't use the same ID on multiple elements.
Try this, notice how I placed the checkboxes in a div
Here it is working: http://jsfiddle.net/Sa2d3/
HTML:
<form>
<div id="checkboxes">
<input type="checkbox" id="all" value="all" name="all" onChange="check()" />ALL <br/>
<input type="checkbox" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" value="amp" name="server[]" onChange="check()" />AMP <br/>
</div>
</form>
JavaScript:
document.getElementById('checkboxes').addEventListener('change', function(e) {
var el = e.target;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
// If 'all' was clicked
if (el.id === 'all') {
// loop through all the inputs, skipping the first one
for (var i = 1, input; input = inputs[i++]; ) {
// Set each input's value to 'all'.
input.checked = el.checked;
}
}
// We need to check if all checkboxes have been checked
else {
var numChecked = 0;
for (var i = 1, input; input = inputs[i++]; ) {
if (input.checked) {
numChecked++;
}
}
// If all checkboxes have been checked, then check 'all' as well
inputs[0].checked = numChecked === inputs.length - 1;
}
}, false);
EDIT:
Based on your request in the comment here is the updated javascript:
http://jsfiddle.net/T5Pm7/
document.getElementById('checkboxes').addEventListener('change', function(e) {
var el = e.target;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
// If 'all' was clicked
if (el.id === 'all') {
// If 'all' is checked
if (el.checked) {
// Loop through the other inputs and removed the check
for (var i = 1, input; input = inputs[i++]; ) {
input.checked = false;
}
}
}
// If another has been clicked, remove the check from 'all'
else {
inputs[0].checked = false;
}
}, false);
You can only assign the same id to one element. What you want to do is give them a class="servers" and then use document.getElementsByClassName("servers"); in your JavaScript.
You cannot have same id for multiple HTML elements. You could do something like this to achieve what you are asking for.
<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check(this, 'a')" checked/>ALL <br/>
<input type="checkbox" id="servers1" value="xampp" name="server[]" onChange="check(this, 's')" />XAMPP <br/>
<input type="checkbox" id="servers2" value="wamp" name="server[]" onChange="check(this, 's')" />WAMP <br/>
<input type="checkbox" id="servers3" value="mamp" name="server[]" onChange="check(this, 's')" />MAMP <br/>
<input type="checkbox" id="servers4" value="amp" name="server[]" onChange="check(this, 's')" />AMP <br/>
</form>
<script>
function check(cb, type){
var all = document.getElementById("all");
if (type == "a" && cb.checked){
var els = document.getElementsByName("server[]");
for(var i = 0; i < els.length; ++i)
els[i].checked = false;
} else if( type == "s" && cb.checked) {
all.checked = false;
}
}
</script>
put this function
function jvcheck(id,Vale){
Checkboxesclass = '.group'+id;
$(Checkboxesclass).each(function() {
this.checked = Vale;
});
}
and then put this code in your main checkbox
jvcheck('group222',this.checked);
all checkbox with class group222 now checked .
if user inputs a value in the input field the class value on the checkbox will change automatically
input field:
<input style="width:25px; margin-left:5px;" type="text" name="qtyA" id="qtyA" />
checkbox:
<input id="INsrv1" name="INopt" type="checkbox" value="1" />1<br>
<input id="INsrv2" name="INopt" type="checkbox" value="2" />2<br>
<input id="INsrv3" name="INopt" type="checkbox" value="3" />3<br>
<input id="INsrv4" name="INopt" type="checkbox" value="4" />4<br>
javascript:
<script>
$(document).ready(function() {
$('#qtyA').on('change', function() {
var max = $(this).val();
});
$("[name$='INopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
});
</script>
for ex:
the user inputs 3 in input field "qtyA"
value : 3
the maxCheckbox[] value on the script will change along with it
from maxCheckbox[1] to maxCheckbox[3]
the actual code:
<script>
$(document).ready(function() {
$('#qtyA').on('change', function() {
var max = $(this).val();
alert(max);
});
$("#srv").on('change', function() {
var max = $('#qtyA').val();
alert(max);
var selVal = $(this).val();
if (selVal == 'Inbound') { // Inbound
$('.Inbound').show();
$('.Outbound').hide();
$("[name$='OUTopt']").prop('class','')
$("#OUTsrvOtr").prop('class','')
$("[name$='INopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
$('#valOUT').val('');
$('div#Outbound').find('span').prop('class','');
}
else if (selVal == 'Outbound') { // Outbound
$('.Inbound').hide();
$('.Outbound').show();
$("[name$='INopt']").prop('class','')
$("#INsrvOtr").prop('class','')
$("[name$='OUTopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
$('#valIN').val('');
$('div#Inbound').find('span').prop('class','');
}
else {
$('.Inbound').hide();
$('.Outbound').hide();
$('#valOUT').val('');
$('#valIN').val('');
$("[name$='INopt']").prop('class','')
$("#OUTsrvOtr").prop('class','')
$('div#Inbound').find('span').prop('class','');
$("[name$='OUTopt']").prop('class','')
$("#OUTsrvOtr").prop('class','')
$('div#Outbound').find('span').prop('class','');
}
});
});
</script>
$(document).ready(function() {
$("input").onchange(function() {
$(this).attr('class','validate[minCheckbox[1],maxCheckbox[1]] checkbox text')
}
});