How to call a function with multiple parameters in onchange()

Question

I am new to javascript and I have a trouble in onchange();

Below is code;

<input type="text" name="txt"  id="aa" onchange="test()">
<input type="text" name="txt"  id="bb" onchange="test()">

function test(a, b, c) {
  var i = 0;
  if (a.value == '') {
      document.getElementById("aa").innerHTML = "a Cannot Be Blank ";
      return i;
  } else if (b.value == '') {
      document.getElementById("bb").innerHTML = "b Cannot Be Blank ";
      return i;
  } else {
      i = 1;
      return i;
  }
}

I donot know how to call the above function so that i could done textbox validation.I have tried onchange="test(this)" ,but i doesnot works.Please find me a solution.

It's kind of unclear what you hope to achieve here. Could you please clarify? — Mahmud Adam, Jun 26 '16 at 07:16
texbox validation should be done on onchange().How will i call this function ?? — L.Nelson, Jun 26 '16 at 07:20
It seems that the function expects you to pass it references to two elements (and it doesn't use its `c` argument), but it already has hardcoded references to the two elements in question, so you should modify it so that it doesn't use the parameters. As it is now the function doesn't make sense because it is trying to display error messages by setting `.innerHTML` of `` elements - that won't work. And it's returning a value that you don't use. — nnnnnn, Jun 26 '16 at 07:41
you can't use `onchange` event for a textbox, you should use `blur, focus` or `keypress` events to check the textbox value. — M.Tanzil, Jun 26 '16 at 07:59
Possible duplicate of [Javascript event handler with parameters](http://stackoverflow.com/questions/10000083/javascript-event-handler-with-parameters) — meJustAndrew, Jun 26 '16 at 08:21

score 0 · Answer 1 · answered Jun 26 '16 at 07:50

1- first of all while writing function in js you must take care of number of opening and closing brackets (scope)

function test(a,b,c)
{
    var i =0;
   if (a.value  =='')
   {
     document.getElementById("aa").innerHTML="a Cannot Be Blank ";
    return i;
   }

   else if (b.value  =='')
  {
      document.getElementById("bb").innerHTML="b Cannot Be Blank ";
     return i;
   }

    else {
    i=1;
    return i;
   }


}

2 - to pass multilple parameter in onchange function .. you can do like this

<input type="text" name="txt"  id="aa" onchange="test(2,2,5)">

score 0 · Answer 2 · edited Jun 26 '16 at 08:14

You want to check empty value of input field when something changes. Try to check by each input id used as a parameters.

<input type="text" name="txt"  id="aa" onchange="test(this.id,'bb')">//this.id returns current element id
<input type="text" name="txt"  id="bb" onchange="test('aa',this.id)">//use id as parameters
<script>
function test(a,b)
{
  var i =0;
  var aa = document.getElementById(a);//call element by parameter id
  var bb = document.getElementById(b);
   if (aa.value =='')
   {
     aa.value="a Cannot Be Blank ";
   }

   else if (bb.value  =='')
  {
      bb.value="b Cannot Be Blank ";
   }

    else {
    i=1;
    return i;
   }
 }        
     </script>

score 0 · Answer 3 · answered Jun 26 '16 at 08:10

1) When you want to manipulate the "value" of an <input> element , you do not use innerHTML. You manipulate it by accessing its value attribute like this :

document.getElementById("MY_INPUT_ID").value = 'Cannot Be Blank';

2) When you want to make validation on multiple fileds then you do it on the form submission and not in "real time". If you want to make "real time" validation then it is better to focus only on one field each time.(If other restrictions do not apply).

3) onChange event is for <select> elements and does not fire upon <input> elements. If you want to "monitor" an <input> element you should use

4) You should not insert "Cannot Be Blank" in the input field , cause it will count as text and you will have issues. If you want to display a message then you need to create a container with your message next to your input.

The following code is more of an example to get you to the right direction of what you are trying to do.

<input type='text' name='aInput' id='aInput' onkeyup='validate(this);'></input>
<input type='text' name='bInput' id='bInput' onkeyup='validate(this);'></input>
<div id='error'></div>
<script language="JavaScript">
  function validate(el){
    var myInputValue = el.value;
    var myInputID = el.id;

    if(myInputValue === ''){
      document.getElementById(myInputID).style.backgroundColor = 'rgba(255,0,0,0.32)';
      document.getElementById('error').innerHTML = el.name + " Cannot Be Blank";
    }else{
      document.getElementById(myInputID).style.backgroundColor = '#fff';
      document.getElementById('error').innerHTML = "";
    }
  }
</script>

How to call a function with multiple parameters in onchange()

3 Answers3