1

I am trying to call a function in my javascript file from an onclick event in html. This code works perfectly in Google Chrome but does not work in Safari as it redirects to the same page and empties the form, without redirecting to the home page of my website.

Here is my HTML code: 

<!-- Login or subscribe form-->
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="card text-white p-5 bg-primary signUpBoxStyle">
            <div class="card-body">
              <h1 class="mb-4">Effettua il login o iscriviti</h1>
              <form>
                <div class="form-group"> <label>Indirizzo email</label>
                  <input type="email" class="form-control" placeholder="Inserisci email" id="email"> </div>
                <div class="form-group"> <label>Password</label>
                  <input type="password" class="form-control" placeholder="Password" id="password"> </div>
                <input type="button" class="btn btn-light text-primary btn-sm" value="Accedi" onclick="loginFunction()">
                <input type="button" class="btn btn-light text-primary btn-sm" value="Crea un Account" onclick="signupFunction()">                      </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

And this is my JavaScript

function loginFunction() {
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
  })
};
Alessandro Gregolin
  • 69
  • 13
  • avoid the use of inline javascript calls..., try to add then in the script as a listener.. store the element by ID or other selector into a variable then `variable.onclick = function(){...}`. But for this, you need to make sure that the element is already on the DOM, but it avoid any kind of not working listeners – Calvin Nunes Mar 13 '18 at 17:05
  • 2
    ^ or `BUTTON_VARIABLE.addEventListener('click' , () => {})` – Francis Leigh Mar 13 '18 at 17:07
  • both these methods do not work... It continues refreshing on the same page – Alessandro Gregolin Mar 13 '18 at 20:45

2 Answers2

0

You might need to tell the browser not to carry out the default behavior of that element via preventDefault(). This SO answer give a little more detail.

Ito Pizarro
  • 1,607
  • 1
  • 11
  • 21
0

Having an if statement to check the attribute is not that scalable but it may be possible that you pass the function call as a parameter. 

let buttons = document.querySelectorAll('input[type=button]')

buttons.forEach(button => {
  button.addEventListener('click', e => {
    let func = e.target.getAttribute('data-call')
    if (func === 'login') {
      loginFunction()
    } else if (func === 'signup') {
      signupFunction()
    }
  })
})


let loginFunction = () => {
  console.log('loginFunction')
}

let signupFunction = () => {
  console.log('signupFunction')
}
<form>
  <input type="button" value="Accedi" data-call="login">
  <input type="button" value="Crea un Account" data-call="signup">                 
</form>
Francis Leigh
  • 1,870
  • 10
  • 25
  • I have copied your code and added it to my document changing the data call of my inputs but nothing happens when I click on the buttons – Alessandro Gregolin Mar 13 '18 at 20:45
  • @AlessandroThegreg you mentioned in the earlier comment that your page keeps refreshing when you click on the buttons... It may be that your form is submitting. You could prevent the form submitting by adding an event listener to that form aswell and preventing default behaviour from 'submit' – Francis Leigh Mar 13 '18 at 21:01
  • This was a thought incase safari was triggering a `submit` event on the form when you clicked the non `submit` type buttons within the form. Are you able to move the buttons outside of the form and see if that helps at all? – Francis Leigh Mar 13 '18 at 21:08