Убрать отправку на обработчик формы

186

18 мая 2018, 23:10

Есть сайт, на котором две формы. Одна из них находится в index.php, вторая в portfolio.html.Обе формы работают через метод Пост. Есть скрипт и обработчик. Так вот, из первой формы все приходит и работает нормально. А со второй приходит нормально, но страницу перекидывает на обработчик (mail.php). Вторую форму я просто скопировал с первой и вставил в нужное место.

Форма где работает не правильно:

$(document).ready(function() { 
  $("#form").submit(function(e) { 
    e.preventDefault(); 
 
    $('.error').remove(); 
 
    var that = $(this); 
    var valid = validate(); 
 
    if (!$.isEmptyObject(valid)) { 
      $.each(valid, function(i, e) { 
        addError(that, i, e); 
      }); 
    } else { 
      $('.error').remove(); 
      $.ajax({ 
        type: "POST", 
        url: "https://jsonplaceholder.typicode.com/posts", 
        data: $(this).serialize(), 
        success: function() { 
          $(".js-overlay-thank-you").fadeIn(); 
          $(this).find("input").val(''); 
          $("#form").trigger("reset"); 
        } 
      }); 
    } 
  }); 
}); 
 
$(".js-close-thank-you").click(function() { // по клику на крестик 
  $(".js-overlay-thank-you").fadeOut(); 
}); 
 
$(document).mouseup(function(e) { // по клику вне попапа 
  var popup = $(".popup"); 
  if (e.target != popup[0] && popup.has(e.target).length === 0) { 
    $(".js-overlay-thank-you").fadeOut(); 
  } 
}); 
 
function validate() { 
  var errors = {}; 
  if ($('#form input[name = \'name\']').val() == '') { 
    errors.name = 'Заполните поле имя'; 
  } 
  if ($('#form input[name = \'email\']').val() == '') { 
    errors.email = 'Заполните поле email'; 
  } 
  if ($('#form input[name = \'phone\']').val() == '') { 
    errors.phone = 'Заполните поле phone'; 
  } 
 
  return errors; 
}; 
 
function addError(form, input_name, error) { 
  form.find('input[name = \'' + input_name + '\']').after('<p class="error">' + error + '</p>'); 
};

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="forma"> 
  <div class="container"> 
    <h1>Мы сделаем все за вас.<br>Всего лишь заполните форму ниже.</h1> 
    <div class="formets"> 
      <form class="form" method="post" action="mail.php" id="form"> 
        <div class="inputs"> 
          <input type="text" name="name" id="inpt" placeholder="Ваше имя" required> 
          <input type="email" name="email" id="inpt" placeholder="Ваш E-mail" required> 
          <input type="tel" name="phone" id="inpt" placeholder="Ваш телефон" required></div> 
        <input type="submit" name="submit" class="buton" id="buton" value="Отправить"> 
      </form> 
      <div class="overlay js-overlay-thank-you"> 
        <div class="popup js-thank-you"> 
          <div class="text-popup">Спасибо за заявку. Мы свяжемся с вами в ближайшее время!</div> 
          <div class="close-popup js-close-thank-you"></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Обработчик формы:

<?php
if(isset($_POST['email'])) {
        $title = 'Заявка с сайта BadyBack Design';
        $name = substr(htmlspecialchars(trim($_POST['name'])), 0, 1000);
        $email =  substr(htmlspecialchars(trim($_POST['email'])), 0, 1000); 
        $phone = substr(htmlspecialchars(trim($_POST['phone'])), 0, 1000);
        $mess = '
        С сайта была отправлена заявка:
        Имя отправителя: '.$_POST['name'].'
        E-mail: '.$_POST['email'].'
        Телефон: '.$_POST['phone'].'
        ';
        // $to - кому отправляем 
        $to = 'me@gmail.com';
        // функция, которая отправляет наше письмо
        mail($to, $title, $mess, 'From:'.$email);  
}
?>

Помогите пожалуйста, где я допустил ошибку? И что нужно скинуть сюда еще?

Answer 1

Возможно, потому что через ajax идет обращение к id="form", если Вы скопировали вторую форму из первой, то у Вас в html получилось два id="form". Такого быть не должно, поскольку браузер воспринимает только один уникальный id на странице, второй будет игнорировать. Попробуйте вторую форму обозначить id="form2" и внести изменения в ajax чтобы он перехватывал post запросы для обоих id.