0

I have a straightforward form to collect a person's details. It sends the data to firebase and I e.preventDefault()to stop it from submitting normally. This is the handler;

let frm = document.forms[0];
frm.addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = document.signup.elements;
    formValues = getFormInfo(formData);
    let submitted = writePupilRecord(formValues);
    console.log(submitted);
    removeForm();
    formResponse();
    return false;
});

This is the hard to figure out bit. It works in Chrome, Safari, Firefox, android, latest iPhone/iPad. It doesn't work in older ios browsers. When I try it locally with the firebase server you get with firebase SDK I can see in the console the GET req when I navigate to localhost and on a working browser when I submit the form there is no HTTP request, as you would expect, because I have preventDefault()ed. But when I do it using XCode simulator with ios9 there is a second request to the server including the submitted data, as if no preventDefault() method is called. Looking up my question I came across suggestions to add the return false; to the callback func, but this made no difference. Why is e.preventDefault() not working only on slightly older iPad/iPhone and what can I do to make it work? I use javascript to build the form in the first place and this still works in older ios.

leonormes
  • 979
  • 10
  • 29

1 Answers1

1

It doesn't work in older osx browsers.

You're using let, which was introduced in ES2015 (aka "ES6"). It's a syntax error in older browsers. Switch it to var (in that code, it doesn't make a significant difference) if you're not dealing with up-to-date browsers.


I realized there might be a dupetarget for this, and there is, but the answers are out of date. I've added one that's more current.

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    If I now said 'yeah I knew that' would you believe me? It was such a small project I forgot about Babel, which I would usually do. Thank you! – leonormes Apr 06 '17 at 16:31
  • @leonormes: :-) Easily done. I sometimes have to work on a project limited to ES5 without transpiling and I have to be **really** careful about introducing arrow functions, `const`, `let`, etc. ESLint can help (although it sounds like you're adding Babel instead). – T.J. Crowder Apr 06 '17 at 16:33