Using two functions in the same Onclick

Asked

Viewed 548 times

1

I have two Javascript functions that are triggered by the same button, one that is responsible for validations and one that moves the page forward.

I can not join these functions and nor change the page that advances, because it is done by the company’s own framework, I can only touch the validation function.

The problem is that even by inserting return null in the validation function, the page advance function is triggered, that is, the form is validated but the page advances anyway.

For reasons of confidentiality I cannot show the code, but I hope that the situation is clear.

So if I have the situation to follow: 

onClick="functionValidacao(); functionAvancarPagina();"

How to "annul" the functionAvancarPagina() case to functionValidacao() point errors?

javascript function

  • Luiz, did any of the answers solve your problem? If yes, you can choose the one that best solved and accept it, see here how and why to do it. It is not mandatory, but it is a good practice of the site, to indicate to future visitors that it solved the problem. And when I get 15 points you can also vote in all the answers you found useful :-) And if none answered/solved, you can comment and/or if applicable, [Edit] the question with more details :-)

2 answers

3

Create the two functions, after that within the validation function, you make a validation(IF), if everything goes right, you trigger the Function to advance. I hope I’ve helped ! 

function validar(){
    if(camposValidadosCorretamente == true){ // se a validação está correta
        this.irParaProximaPagina(); // chama função e vai para a próxima página
    }
}

function irParaProximaPagina(){
    ...
}

  • Hi Leroy! Can you add an example of code? We help to format if needed

  • I edited the answer.

2

You can intercept the click event before it reaches the button, run the tests you need, and decide whether to let the event reach the button or not.

To do this you will need to understand how events propagate through the DOM, this answer has a more complete explanation, but a summary would be:

  1. The user clicks on the button
  2. The event click propagation of the window up to the button. (Capture Phase)
  3. The event arrives at button. (Target Phase)
  4. The "pimple" event back to window. (Bubbling Phase)

Maybe it will be easier to understand with the image below:

Fases da propagação de eventos no DOM

That said, you could hear the event click in the father of button in the capture phase (Capture Phase) and choose whether or not to allow the event to propagate to the button.

To do this just use the method Element.addEventListener() with the parameter useCapture as true so that the Handler run in Capture Phase.

btnParent.addEventListener('click', meuHandler, true);

Within meuHandler you can prevent the event from reaching the button using the method Event.stopPropagation().

An example of the concepts explained below:

var btn = document.getElementById('btn')
var check = document.getElementById('check')
var wrapper = document.getElementById('wrapper')

btn.addEventListener('click', function () {
  console.log('-> Esta função sai da página!')
})

wrapper.addEventListener('click', function(event) {
  if (check.checked) {
    console.log('Evento de click cancelado...')
    event.stopPropagation()
  }
}, true)
<span id="wrapper">
  <button id="btn">Click</button>
</span>

<label>
  <input id="check" type="checkbox"> Cancelar envio
</label>

Browser other questions tagged javascript function

You are not signed in. Login or sign up in order to post.