I have multiple checkbox on my form. I need to make user to select atleast one checkbox or else the form will not submit. I tried required attribute but it checks if user has checked all check boxes.
How to do this?
One solution is to add required attributes to all the checkboxes, and when at least one of these checkboxes is checked, remove the required attributes for all the checkboxes using jQuery.
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
}
else {
requiredCheckboxes.attr('required', 'required');
}
});
DEMO
You can use Javascript that just loops through your html checkboxes and sets the Variable issomethingchecked to TRUE if at least one of them is cheched .
demo http://jsfiddle.net/updpxrfj/2/
var checkboxElements = document.getElementsByTagName("input");
var issomethingchecked = false;
for(var i = 0; i < checkboxElements.length; i++) {
if(checkboxElements[i].type.toLowerCase() == 'checkbox') {
if (checkboxElements[i].checked == true) {
issomethingchecked = true;
}
}
if (issomethingchecked === true) {
// Continue with submiting the form
console.log(issomethingchecked);
}
}
Related
I have a function that hides a div with the corresponding ID based on a radio button change, however, I would like to hide multiple items at once and as ID is unique I am not able to just hide them all. How would I set up a class that I can hide and how would I adjust this code below to make that work?
Any help greatly appreciated
function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};
You can use data attributes for this purpose together with the attribute selectors. So you need just to add the data-hidden-for attributes to the required nodes and access them using document.querySelector() or document.querySelectorAll()
First give all the elements a base class name baseClass. You could just give them a class name like hidden and then in your code you could do something like below:
const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}
And on the click event of the radio button you could add this class I mentioned above to whichever ones you want to hide:
element.classList.add("hidden");
or
element.classList.remove("hidden");
Hello I have a question I want to reset button if the fields are empty, the reset is not displayed if a value is entered, the reset is displayed
Reset
for jquery ill recomand this
$( "input" ).change(function() {
var val = $(this).val();
if(val == ""){
$("#yourresetbutton").hide();
}else{
$("#yourresetbutton").show();
}
});
I'm not sure what you mean by this but I take it you want a button to appear only if a textbox if left blank. If so you this is some code you can use:
<input id='textbox' type='text'></input>
<button id='resetButton'></button>
setInterval(checkText, 10)
function checkText() {
if(document.getElementById('textbox').value == '') {
document.getElementById('resetButton').visibility = 'visible';
}
else() {
document.getElementById('resetButton').visibility = 'hidden';
}
}
I have some checkboxes in each row in my table. Each one checkbox has name='myName' because I want to select only one checkbox in each row. But something I'm missing because I'm able to check all of them:
but I want that result:
what am I missing here ?
The unique name identifier applies to radio buttons:
<input type="radio" />
change your checkboxes to radio and everything should be working
Checkboxes, by design, are meant to be toggled on or off. They are not dependent on other checkboxes, so you can turn as many on and off as you wish.
Radio buttons, however, are designed to only allow one element of a group to be selected at any time.
References:
Checkboxes: MDN Link
Radio Buttons: MDN Link
$(function () {
$('input[type=checkbox]').click(function () {
var chks = document.getElementById('<%= chkRoleInTransaction.ClientID %>').getElementsByTagName('INPUT');
for (i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
if (chks.length > 1)
$(this)[0].checked = true;
});
});
sapSet = mbo.getThisMboSet()
sapCount = sapSet.count()
saplist = []
if sapCount > 1:
for i in range(sapCount):`enter code here`
defaultCheck = sapSet.getMbo(i)
saplist.append(defaultCheck.getInt("HNADEFACC"))
defCount = saplist.count(1)
if defCount > 1:
errorgroup = " Please Note: you are allowed"
errorkey = " only One Default Account"
if defCount < 1:
errorgroup = " Please enter "
errorkey = " at leat One Default Account"
else:
mbo.setValue("HNADEFACC",1,MboConstants.NOACCESSCHECK)
$('#OvernightOnshore').click(function () {
if ($('#OvernightOnshore').prop("checked") == true) {
if ($('#OvernightOffshore').prop("checked") == true) {
$('#OvernightOffshore').attr('checked', false)
}
}
})
$('#OvernightOffshore').click(function () {
if ($('#OvernightOffshore').prop("checked") == true) {
if ($('#OvernightOnshore').prop("checked") == true) {
$('#OvernightOnshore').attr('checked', false);
}
}
})
This above code snippet will allow you to use checkboxes over radio buttons, but have the same functionality of radio buttons where you can only have one selected.
Is there an offline tool that can verify whether certain tags possess particular attributes?
I'm looking for something that can verify that all:
form tags have a name attribute.
div, and span tags have at least an id or class attribute.
Does tidy have an obscure option where you could specify such things?
simply and quickly you can do your validations like this if jQuery is available on your page.
$('form').each(function(){
if ($(this).attr('name') === undefined) {
alert('There is at least one form with no name.');
}
});
$('div').each(function(){
if ($(this).attr('id') === undefined) {
alert('There is at least one div with no id.');
}
});
also this is a non-jQuery solution example
var arr = document.getElementsByTagName('div');
var flag = false;
for (var i = 0, len = arr.length; i < len; i++) {
if (arr[i].getAttribute('id') == null) {
flag = true;
break;
}
}
if (flag) {
alert('There is at least one div with no name.');
}
String +
if user click the + sign i want to show some oder list
then String -
If the user click the - sign i want to hide order list
How to acheive this with javascript , not using ajax , jquery
You will have to create an id for the ordered list, e.g.
<ol id="superId">
</ol>
then on javascript
function displayOL(enabled) {
if (enabled) {
document.getElementById("superId").style.display = "none";
document.getElementById("minus").style.display = "block";
document.getElementById("plus").style.display = "none";
} else {
document.getElementById("superId").style.display = "block"
document.getElementById("minus").style.display = "none";
document.getElementById("plus").style.display = "show";
}
}
then on anchor tag
+
-
PS....I just did a rough implementation in no order....
try this and attached it to your any event, i.e. onclick, onmouseover, etc...:
function toggleList(elem){
var theList = document.getElementById(elem);
if(theList.style.display == "none"){
theList.style.display == "block";
}
else{
theList.style.display == "none";
}
}
This method can be used for anything you want to show/hide. Obviously, you can call the function and variable anything you like that makes sense...