Combine javascript functions

Question

I have a javascript function that checks to make sure radio buttons are checked, and shows a message if they are not all checked, and if you click Cancel, the message goes away so the user can check more radio buttons. If you click Ok, it submits the form anyways. It works and is great.

I have another function that checks to make sure a value greater than zero is entered in a single text(number) field. It shows a message if it is not greater than zero, and if you click Cancel the message goes away so the user can enter a number. If you click Ok, it submits the form anyways. Again, it works and is great.

Now, when I try to run them both at the same time... something odd happens. The messages show up, but if you click Cancel it submits the form anyway. I want the Cancel buttons to work the same as they do when ran separate... make sense?

Check if radio buttons are checked:

<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('Not all picks entered... 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>

Check if text field greater than zero:

<script type="text/javascript">
function validate()
{
    var lgwscore;
    lgwscore = parseFloat(document.getElementById('tieBreakerPoints').value);
    if (lgwscore > 0 )
    {
        //Everything is good.
    }
    else
    {
        confirm("You may want to set LGW points\nhigher than Zero.\n\nClick Cancel to enter points.\nClick Ok to keep at Zero.");
        return false;
    }
}

Call both functions on submit:

echo '<form name="entryForm" action="entry_form.php" method="post" onsubmit="return validate() & checkform();">' . "\n";

Any help appreciated.

Answer 1

Use && (which is the logival and operator and not the bitwise and you used) and change the validate to

function validate(){
  var lgwscore = parseFloat(document.getElementById('tieBreakerPoints').value);
  if (lgwscore > 0 ) return true;
  else return confirm("You may want to set LGW points\nhigher than Zero.\n\nClick Cancel to enter points.\nClick Ok to keep at Zero.");
}

Answer 2

Use && instead of & to combine your functions. And because && short circuits, it will not call the second function if the first function returns false.

& is the bitwise and operator. It operates on numbers and returns a number. true & true is 1, and true & false is 0. Thus your code is returning either 0 or 1 instead of true or false.

&& is the logical and operator. It operates on booleans and returns a boolean. true && true is true, and true && false is false.

If you want both functions to be called regardless of whether either of them fails, you can do that with

function validateAll() {
    var result = checkform();
    result = validate() && result;
    // If you want more condition functions, you can add them here:
    // result = x() && result;
    return result;
}

Answer 3

& is a bitwise operator, it will do coercion and return a number in the end.
&& is a logical operator, it will do coercion and return a boolean in the end.

You need to use &&.

See this sample:

function a() {
  console.log('a');
  return false;
}

function b() {
  console.log('b');
  return false;
}

console.log('a() & b()', a() & b());
console.log('a() && b()', a() && b());