Почему работает PHP скрипт на мобильном браузере (Safari, Chrome)?

Question

[Onixe]

Всем привет! Помогите пожалуйста разобраться с кодом.
За день удалось наколдовать код, который направляет на email данные с формы на сайте. Он конечно кривоватый, что уж тут говорить - что-то написано на JS, что-то творчески скопировано на jquery и php.
В итоге работает на декстопе (Safari, Chrome, Firefox), а вот на мобильном (iOS) сработало только на Firefox. Мобильные Safari и Chrome валидацию формы делают, а вот данные не отправляют - как будто вообще кнопка не срабатывает, а форма сбрасывается.

Не подскажете, где косяки?

Кусок HTML:

<form id="form">
  <input class="form-input-contact" type="text" name="name" placeholder="Как Вас зовут?" id="name">
  <input class="form-input-contact" type="text" name="phone" placeholder="Ваш номер телефона" id="phone">
  <input class="form-input-contact" type="text" name="email" placeholder="или Email" id="email">
  <textarea class="form-input-message" type="text" name="message" placeholder="Пожелания или вопросы" id="message"></textarea>
  <input class="form-input-button" type="button" value="Отправить сообщение" id="button">
  <div class="form-input-PD">Нажимая на кнопку, вы даете согласие на обработку персональных данных</div>
  <div class="result"></div>
  <div class="form-message_nonsubmitted" id="formMessage">
    <p>Ваше сообщение отправлено, и мы скоро с вами свяжемся!</p>
  </div>
</form>

Валидирую форму:

const formButton = document.getElementById('button');

formButton.onclick = function(event) {
	event.preventDefault();
	const phone = document.getElementById('phone');
	const email = document.getElementById('email');
	let classPhone = phone.classList;
	let classEmail = email.classList;
		if (phone.value === "" && email.value === "") {
			classPhone.add ("alert");
			classEmail.add ("alert");
  			} 
  		
		if (phone.value != "" || email.value != "") {
			classPhone.remove ("alert");
			classEmail.remove ("alert");
	  	}
}

Еще скрипт (AJAX-запрос)

$('[type="button"]').click(function() {
  $.post( 
  
  "submit.php",
  
  {
    name: $('[name="name"]').val(),
    phone: $('[name="phone"]').val(),
    email: $('[name="email"]').val(),
    message: $('[name="message"]').val()
  }, 
  
  function( data ) {
    $( ".result" ).html(data);
  }
  
  );
});

PHP:

<?php 
if (!empty($_POST['phone']) OR !empty($_POST['email'])){
  
  $headers = 'From: Oyster House\r\n'.
             'Reply-To: [e-mail]\r\n'.
              'X-Mailer: PHP/'. phpversion();
             
  $theme = 'Новое сообщение';

  $letter = 'Данные сообщения:\r\n';
  $letter .='Имя: '.$_POST['name'].'\r\n';
  $letter .='Email: '.$_POST['email'].'\r\n';
  $letter .='Телефон: '.$_POST['phone'].'\r\n';
  $letter .='Сообщение: '.$_POST['message'].'\r\n';
  
  if (mail('[e-mail]', $theme, $letter, $headers)){
    echo '<span class="form-message_submitted">' . "Ваше сообщение отправлено, и мы скоро с вами свяжемся!" . '</span>';
  } else {
    echo "Ошибка при отправке!";
  }
}

Answer 1

[Николай]

Документация
Судя по документации, поведение click неизвестно

$('[type="button"]').click(function()
попробуй заменить на
$('[type="button"]').on('click',function()

а
formButton.onclick = function(event) {
заменить на
formButton.addEventListener("click", send);

function send(event) {
  event.preventDefault();
  const phone = document.getElementById('phone');
  const email = document.getElementById('email');
  let classPhone = phone.classList;
  let classEmail = email.classList;
    if (phone.value === "" && email.value === "") {
      classPhone.add ("alert");
      classEmail.add ("alert");
  			} 
  		
    if (phone.value != "" || email.value != "") {
      classPhone.remove ("alert");
      classEmail.remove ("alert");
    	}
}