Custom Event for HTML form

Question

Lets say I have two hidden form field inputs:

<input id="val1" name="val1" value="0"/>
<input id="val2" name="val2" value="0"/>

Lets say I have a warning DIV with a message that I want to display if both of these inputs have a value of "1"

<div id="myWarningDiv" style="display: none;" class="clswhatever">
    You have done something wrong comrade!
</div>

Now suppose there are many ways to trigger a change one or both of these hidden field values. What I don't want to do is change code on each of these triggers to check if both of these values are "1". Is there a way I can just add a custom event that would just listen for this to happen, without using setInterval or anything clugy like that?

This is a simple example. What I am really looking for is NOT a way to attach an event to a single DOM element, but to create a custom condition that might span mutiple DOM objects, but when triggered would call an event handler function. Heres some pseudo code:

public Boolean onBothTrue() {
   if (document.getElementById("val1").value == "1" && document.getElementById("val2").value == "1") {
       return true;
   }
   else {
       return false;
   }
}
document.addEventListener('onBothTrue',myEventHandler);
function myEventHandler() {
    var elem = document.getElementById("myWarningDiv");
    elem.style.display = "block";
} 

Answer 1

I'd do something like this:

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var div = document.getElementById('myWarningDiv');

input1.addEventListener('change', check);

input2.addEventListener('change', check);

function check() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

EDIT

A form will receive change events from its children, in this case I would attach a change event listener to the parent form and perform the check when any input change, eg:

var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('input');

form.addEventListener('change', check);

function check(event) {
    var element = event.target;
    //convert nodeList to Array
    var inputArray = Array.prototype.slice.call(inputs);
    var conditionMet = true;

    // check all inputs checked
    inputArray.forEach(function (el, index) {
        if (!el.checked) {
            conditionMet = false;   
        }
    });

    // OR 

    // check all inputs with a class "required" are checked
    inputArray.forEach(function (el, index) {
        if (el.className.indexOf('required') !== -1) {
            if(!el.checked) {
                conditionMet = false;
            }
        }
    });

    if (conditionMet) {
        showWarningDiv();
    }
}

function showWarningDiv() {
    // show div
    console.log('show warning');
}

See Fiddle

Answer 2

The answers provided give good examples of who to do this with or without jQuery. To answer your question about the custom events, you can register it but it as you wrote but it will not fire (because how would it know when). so the only way to do this would be something like:

window.setInterval(function(){
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });

        // Dispatch/Trigger/Fire the event
        document.dispatchEvent(event);
    }
}, 500);

There are other posts here which discuss the event handling in native JS (i.e. How to trigger event in JavaScript?)

Update using custom event & change handler:

var input1 = document.getElementById('val1');
var input2 = document.getElementById('val2');
var warningDiv = document.getElementById('myWarningDiv');

function customCondition() {
    if (parseInt(input1.value, 10) === 1 && parseInt(input2.value, 10) === 1) {
        // Create the event
        var event = new CustomEvent("bothTrue", { "detail": "Both elements are true which indicates an error" });
        // Dispatch/Trigger/Fire the event
       document.dispatchEvent(event);
}

input1.addEventListener('change', customCondition);
input2.addEventListener('change', customCondition);

document.addEventListener('bothTrue', function(e){
    warningDiv.style.display = 'block';
});

Answer 3

Using jQuery

$("#val1,#val2").change(function() {
 var other = ($(this).get(0).id==="val1")?$("#val2"):$("#val1");
 if($(this).val() == 1 && $(other).val() == 1) {
   $("#myWarningDiv").show();
 } else {
   $("#myWarningDiv").hide();
 }
});

Here is a fiddle for it

https://jsfiddle.net/sx0mg8k1/

Setter to make sure that the change event is triggered every time the value is changed.

$.fn.setVal = function(val) {
    $(this).val(val);
    $(this).trigger('change');
}

Anytime you want to change the value, you would use $("#val1").setVal(0);

Answer 4

I'll take the same example, using JQuery this is possible by appending a css class to each element, basically inputs .

<input id="val1" name="val1" class="listen"value="0"/>  
<input id="val2" name="val2" class="listen" value="0"/>

JQuery

$(".listen").each(function() {
   $(this).on('change', function(){
   var val=$(this).val();
   alert(val);
   });
});

Answer 5

Try

var input = $("input"), message = $("#myWarningDiv"), arr = [], n = 1;
input.each(function(i, el) {
  return $(el).on("input", function(e) {
    arr[i] = Number($(this).val());
    var res = arr.length === input.length ? arr.every(function(value) {
      return value === n
    }) : false;
    return res ? message.show() : message.hide()
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="val1" name="val1" value="0"/>
<input id="val2" name="val2" value="0"/>
<!-- Lets say I have a warning DIV with a message that I want to display 
     if both of these inputs have a value of "1" -->

<div id="myWarningDiv" style="display: none;" class="clswhatever">
    You have done something wrong comrade!
</div>