@dashademkova

Как сделать чтобы скрипт работал корректно?

Здравствуйте, столкнулась с такой проблемой при добавлении скрипта обратной связи.
У меня на странице 6 кнопок. И данный скрипт работает только с одной кнопкой. Добавляя одинаковый код к остальным кнопкам скрипт не хочет работать перестает функционировать кнопка нажатия. Как мне сделать чтобы данный скрипт у всех кнопок работал?
То что находится в html
<script type="text/javascript">
    function validateEmail(email) {
      var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return reg.test(email);
    }

    $(document).ready(function() {
      $(".modalbox").fancybox();
      $("#contact").submit(function() { return false; });
      $("#send").on("click", function(){
        var emailval  = $("#email").val();
        var namevl  = $("#name").val();
        var phonevl  = $("#phone").val();
        var msgval    = $("#msg").val();
        var msglen    = msgval.length;
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
          $("#email").addClass("error");
        }
        else if(mailvalid == true){
          $("#email").removeClass("error");
        }
    if(mailvalid == false) {
          $("#name").addClass("error");
        }
        else if(mailvalid == true){
          $("#name").removeClass("error");
        }
        if(mailvalid == false) {
              $("#skype").addClass("error");
            }
            else if(mailvalid == true){
              $("#skype").removeClass("error");
            }
        if(mailvalid == false) {
          $("#phone").addClass("error");
        }
        else if(mailvalid == true){
          $("#phone").removeClass("error");
        }
        if(msglen < 4) {
          $("#msg").addClass("error");
        }
        else if(msglen >= 4){
          $("#msg").removeClass("error");
        }

        if(mailvalid == true && msglen >= 4) {
          // если обе проверки пройдены
          // сначала мы скрываем кнопку отправки
          $("#send").replaceWith("<em>отправка...</em>");
          $.ajax({
            type: 'POST',
            url: 'sendmessage.php',
            data: $("#contact").serialize(),
            success: function(data) {
              if(data == "true") {
                $("#contact").fadeOut("fast", function(){
                  $(this).before("<p><strong>Успешно! Ваше сообщение отправлено  :)</strong></p>");
                  setTimeout("$.fancybox.close()", 1000);
                });
              }
            }
          });
        }
      });
    });
  </script>

Сама кнопка
<div class="button">
                      <a href="#inline" class="modalbox">Заказать</a>

                      <div class="post2">

                    <div id="inline">
                      <h2>Онлайн заявка</h2>
                      <form id="contact" name="contact" action="#" method="post">
                        <input type="name" id="name" name="name" class="txt" placeholder="Ваше имя">
                        <input type="phone" id="phone" name="phone" class="txt" placeholder="Ваш телефон">
                        <input type="email" id="email" name="email" class="txt" placeholder="Ваш e-mail">
                        <input type="skype" id="skype" name="skype" class="txt" placeholder="Ваш Skype">
                        <textarea id="msg" name="msg" class="txtarea"  placeholder="Ваше сообщение:"></textarea>
                        <button id="send">Отправить</button>
                      </form>
                    </div>


                      </div>
                  </div>
  • Вопрос задан
  • 202 просмотра
Решения вопроса 1
@Yan-s
id может быть только 1 на странице. Соответственно вам надо избавиться от любого дублирования id в html. Следовательно и в JS селекторы тоже надо поменять.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы