I am using below code for validating the check box
if(!validateForm())
{
alert("Please select intrested in required service");
return false;
}
return true;
}
function validateForm()
{
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php" ;
}
}
return false;
}
I have about 5 check boxes. If checked only 1 then it will go to thankyou-enquiry-hrservice.php. If i select multiple check boxes its not redirecting to that page instead its refreshing the current page with empty fields in website.
when you do:
if (c[i].checked) {return true}document.myForm.action="thankyou-enquiry-hrservice.php"
On the first checked ítem the function will return true and the:
document.myForm.action="thankyou-enquiry-hrservice.php"
Part wont be executed.
As for the 1 checked ítem sending you to the page you want, I'd bet that it's not the first chechbox that you're selecting. So when at least evaluate to false once, it's sending you where you want to go.
As requested a quick fix could be:
function validateForm()
{
var answer = false;
var c = document.getElementsByTagName('input');
for (var i = 0; i < c.length; i++)
{
if (c[i].type == 'checkbox')
{
if (c[i].checked) {
answer = true;
document.myForm.action="thankyou-enquiry-hrservice.php";
}
}
}
return answer;
}
But without knowing anything else of your intentions for this code I can't do anything else.
Related
I'm using vanilla JS to try and disable/re-enable form elements depending on the value of one of the form elements selected.
function editableFormElements() {
let formElements = document.getElementById('NewCaseForm').elements;
let assignedTo = document.getElementById('assignedTo');
if(assignedTo.value == "pending")
{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = true;
}
}
else{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = false;
}
}
assignedTo.disabled = false;
}
document.getElementById('assignedTo').addEventListener('change', editableFormElements);
I always want the 'assignedTo' element to be enabled, so I'm setting disabled to false again at the end of the function. The problem is, this doesn't seem to work. That form element remains disabled. What am I missing here?
Here http://jsfiddle.net/B9r22/17/ I created a two HTML forms and I would like to validate forms with javascript function. First it will be good to check if every required fields were filled in form. I need some universal check function because forms will be dynamic. I write something to check radio buttons. But I don´t know how to solve, if there will be other form.
var formValid = false;
function check(){
var radios = document.getElementsByName("first");
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("error");
return formValid;
}
http://jsfiddle.net/B9r22/18/
var xyz = document.forms;
for(var x = 0; x < xyz.length; x++){
var list_of_nodes = xyz[x];
for(var j = 0; j < list_of_nodes.length; j++){
if(list_of_nodes[j].nodeName == 'INPUT'){
var node = list_of_nodes[j];
console.log(node);
if(node.getAttribute('data-required') == "required" && (node.value == null || !node.checked)){
alert("error"); //replace this line with what you want to do if the form isn't filled
}
}
}
}
document.forms will return all the forms in the document so it doesn't matter if there is 1 or 51. then it just loops though the childNodes that are inputs and checks to see if they are required. If they are and they are not checked or have a null value (probably want to check it against empty string as well) then this will pop up an error.
Obviously this is rough but with one or 2 adjustments it should do the trick.
Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>
I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>
Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.
I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});