buttons that calls two actions

Question

I wanted to create a button that shows the pop up to show the user that the OTP code has sent to their mobile phone, and also be able to link it to another "Verify OTP Code" page to let the user type in the verification code that is sent to their mobile phone. How do I create a button that calls two functions when it is being clicked? I tried the code below and it is not working at all. Can someone provide me an answer on how to create a button that calls two actions when it is clicked?

This my button in the HTML code:

<div class="col-md-12">
    <div class="form-group">
        <input type="text"  id="number" name="phone" class="form-control" placeholder="Phone Number" required>
        <br>
        <div id="recaptcha-container"></div>           
        <button id="verify"class="block"type="button" onclick="one(); phoneAuth();">
            Send Verification Code
        </button>                                       
    </div>
</div>

This is my JavaScript code:

window.onload = function () {
    render();
};

function render() {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
    recaptchaVerifier.render();
}

function one() {
    window.location.href = 'insert.php';
}

function phoneAuth() {
    //get the number
    var number=document.getElementById('number').value;

    //phone number authentication function of firebase
    //it takes two parameter first one is number,,,second one is recaptcha
    firebase
        .auth()
        .signInWithPhoneNumber( number, window.recaptchaVerifier )
        .then(
            function ( confirmationResult ) {
                //s is in lowercase
                window.confirmationResult = confirmationResult;
                coderesult = confirmationResult;

                console.log(coderesult);
                alert("Message sent");
            }
        )
        .catch(
            function (error) {
                alert(error.message);
            }
        );
}

function codeverify() {
    var code = document.getElementById('verificationCode').value;

    coderesult
        .confirm(code)
        .then(
            function ( result ) {
                alert("Phone Number Verified");
                var user=result.user;
                console.log(user);
            }
        )
        .catch( 
            function ( error ) {
                alert(error.message);
            }
        );
}

score 0 · Answer 1 · answered Nov 09 '20 at 08:58

Just make one function buttonClicked() and set it onClick of the button:

function buttonClicked()
{
    phoneAuth();
    codeverify();
}

When the button is clicked, this function will run and fire the two inner functions. Make sure, that you place it after the both definitions of phoneAuth() and codeverify().

score 0 · Answer 2 · answered Nov 09 '20 at 09:01

you are already sent to insert.php before you can do the phoneAuth(). So I would suggest you use ajax for calling insert.php like this

function one(){
    $.ajax({
      url: insert.php,
      method: 'YOUR_METHOD_POST_GET_OR_OTHER',
      success: function(result){
        //Do something with the response if you want
      },
      error: function(xhr, status, error){
        //Show error or something here
      }
    });
}

Doomd · Answer 3 · 2020-11-09T09:23:18.460

There are many ways to achieve what you're after...but my preference is simply to write a "controller function" that executes as many subfunctions as you need:

function one() {
  // does the first thing
}

function two() {
  // does another thing
}

function controller() {
  one();
  two();
}
 <button id="verify" class="block" type="button" onclick="controller();">

That all being said, you CAN call multiple functions with your onclick. But I think the problem you're facing is that the first function you call (one()) is requesting another page (window.location.href). When your function executes, you're effectively leaving the page and unloading the javascript from memory. In other words, you may be aborting the the page/script before the second function has a chance to execute. You need to change the order of your functions, use a controller function and execute your functions within the controller in the appropriate order...or use ajax/async methods in your functions. Also...make sure you have spaces between all your html attributes in your button tag. You didn't have spaces between id, class, and type...and that might be causing the failure as well.

Additionally, this question has been answered before...

score 0 · Answer 4 · answered Nov 09 '20 at 09:24

How do I create a button that calls two functions when it is being clicked?

To add one or multiple event listeners to a DOM element, use addEventListener

See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

To remove one or multiple event listeners from a DOM element, use removeEventListener

See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

With the above in mind, a clean, unobtrusive replacement for the inline attribute:

onclick="one(); phoneAuth();"

would be:

const verifyButton = document.getElementById('verify');

verifyButton.addEventListener('click', one, false);
verifyButton.addEventListener('click', phoneAuth, false);

buttons that calls two actions

4 Answers4