Call 2 Functions Within Onchange Event

Call 2 functions within onChange event

You can do it by putting the two functions in double quotes:

<input type="text" value={this.state.text} onChange="this.props.onChange(); this.handleChange();" />

This should work. But it would be better if you call the second function within the first one:

function testFunction() {
    onChange();
    handleChange();
}

call two functions within onchange event in react

You can only assign a handler to onChange once. When you use multiple assignments like that, the second one will overwrite the first one.

You will either have to make a handler that calls both functions, or use an anonymous function:

twoCalls = e => {
  this.functionOne(e)
  this.functionTwo()
}
.
.
.
<FormControl
    name="searching"
    placeholder="Searching"
    onChange={this.twoCalls}
/>

Or...

<FormControl
    name="searching"
    placeholder="Searching"
    onChange={e => { this.functionOne(e); this.functionTwo() }}
/>

2 function calls into onChange - ReactJS

How it is possible for a variable/property to hold two values at the same time?

We can assign a single function to Onchange event, so what you can do is either create a new function and call these two function from that or call one from another.

Creating new Function:

onChange = { (e) => { this.activarBotonEnviar(e); this.contadorDeCaracteres(e) } }

Calling one function from another:

onChange = { this.activarBotonEnviar }

and call contadorDeCaracteres from activarBotonEnviar function:

activarBotonEnviar(e){
   ...
   this.activarBotonEnviar();
}

Call two function() by one Onchange

call your second function on success of the first function

<select name="po_no" onchange="showhistory(this.value);">



<script>

 function showhistory(str)
 {if (str=="")
   {
  document.getElementById("txtHistory").innerHTML="";
   return;
  } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHistory").innerHTML=xmlhttp.responseText;
    showsize(str);
}
 }
xmlhttp.open("GET","gethistory2.php?s="+str,true);
xmlhttp.send();
 }

 function showsize(str)
 {
 if (str=="")
  {
   document.getElementById("sizeHint1").innerHTML="";
   return;
   } 
 if (window.XMLHttpRequest)
   {
   xmlhttp1=new XMLHttpRequest();
    }
 else
   {
   xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
   }
xmlhttp1.onreadystatechange=function()
   {
   if (xmlhttp1.readyState==4 && xmlhttp.status==200)
     {
    document.getElementById("sizeHint1").innerHTML=xmlhttp1.responseText;
    }
    }
  xmlhttp1.open("GET","getsize5.php?q="+str,true);
  xmlhttp1.send();
  }
 </script>

AJAX - Issue calling two functions inside one onchange event

You define precioProd and imagenProd but never call them.

function seleccionProd(str) {
    precioProd(str);
    imagenProd(str);

    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
            document.getElementById("precioOculto").value = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
    }

    function imagenProd(str) {
        if (str=="") {
            document.getElementById("imagen").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("imagen").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "seleccion_prod_compra_imagen.php?q="+str, true);
        xmlhttp.send();
    }
}

How to add two functions passed as props to an onChange event in React and Material UI?

call those functions inside handle OnChange instead of returning them

   const handleOnChange = (event) => {
      handleInput(event)
      validate(event)
   };

Javascript: Run multiple functions using onChange

Try this

select.onchange = function () { updateMe(), updateMeAlso(),updateMeToo() };

I can't call two functions from onchange event

Just try with:

onchange="ajax(this);locname(this);"

---

Related Topics