Javascript-форум - Как сделать несколько кнопок для одной функции ?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать несколько кнопок для одной функции ? (https://javascript.ru/forum/misc/69602-kak-sdelat-neskolko-knopok-dlya-odnojj-funkcii.html)

Как сделать несколько кнопок для одной функции ?

Есть статья обратной связи

Там есть код функции:

// =========================================================================  contact_form
$(function() {
    //Функция проверяет заполнено ли поле с телефоном
    function formValide() {         
        var str = $('#contact_form input[name=tel]').val();
        str = jQuery.trim(str);                
        if(str.length < 5){                
            alert ('Введите телефон');          
            return false;
        }   
        return true;
    }
 
    //при нажатии на кнопку button нужной формы запускаем функцию обработки данных
    $('#contact_form .button').live('click', function() {
        if (formValide()) {
            //если форма прошла проверку, выводим блок с текстом ожидания
            $('#contact_form').before('<h3 id="contact_form_info">Оформление заявки. Подождите...</h3>');
            $('#contact_form').hide();
            //берем путь php обработчика
            order_url = $('#contact_form').attr('action');          
            //посылаем асинхронный запрос на сервер и передаем все данные формы
            $.post(order_url,{
                    name: $('#contact_form input[name=name]').val(),
                    tel: $('#contact_form input[name=tel]').val(),
                    email: $('#contact_form input[name=email]').val(),
                    message: $('#contact_form textarea[name=message]').val(),
                    send: "1"
                }, function(data) {
                    //выводим возврашаемый сервером код html вместо содержимого формы
                $('#contact_form').html(data);
                $('#contact_form').show();
                $('#contact_form_info').remove();
            }, "html");         
        }
        return false;
    });
});
 
// =========================================================================  go_order
$(function() {
    //фкнкция вызова формы обратной связи
    $('#callback').click(function(){
        //появление окна обратной связи
        $('#popup').fadeIn();
        //добавляем к окну иконку закрытия
        $('#popup').append('<a id="popup_close"></a>');
        //расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
        q_width = $('#popup').outerWidth()/-2;
        q_height = $('#popup').outerHeight()/-2;
        $('#popup').css({
            'margin-left': q_width,
            'margin-top': q_height
        });
        //выводим затемение страницы и делаем полупрозрачным
        $('body').append('<div id="fade"></div>');
        $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn();
        return false;
    });
     
    //функция закрытия окна
    $('#popup_close, #fade').live('click', function() {
        $('#fade').fadeOut(function() {
            $('#fade').remove();
            $('#popup_close').remove();
            $('#popup').fadeOut();
        });
    });
 
});

И кнопка вызова через id="callback"

Есть пхп файл (но он думаю не нужен)
Ксс (тоже)
и форма:

<div id="popup">
    <form id="contact_form" role="form" method="post" action="./php/order.php">
        <h3>Напишите нам</h3>
        <input type="text" name="name"  placeholder="Как к вам обращаться?">
        <input type="text" name="tel"  class="required" placeholder="Контакный телефон (обязательно)">
       
        <input type="hidden" name="send" value="1">
        <textarea name="message" placeholder="Текст сообщения(НЕ обязательно)" rows="5"></textarea>
        <a href="#" class="btn button form_submit">Заказать</a>
    </form>
</div>

Вопрос вот в чём. Делаю несколько кнопок по сайту вызова функции callback. Работает только одна. из трёх.

Прошу не пинать сразу т.к. прошёлся по форуму и нашёл похожую проблему и решение в виде:

Там у чувака было:

$("#prone").click(function () {
alert (this.name);
});

Потом он решил вот так:

$('.prone').bind('click', function(){
    alert(this.name);
});

а ко всем нужным кнопкам добавил class='prone' и все!

но у меня не получилось (( Помогите плиз((:cray:

Пробовал по аналогии. Т.е. поменял вот эту строку

$('#callback').click(function(){
на эту
$('.callback').bind('click', function(){

и ссылку сделал не id=callback а class=callback

Но не работает((

bilnaz,
jquery какая версия?

jquery-1.7.2.min.js

Но подключаю не из гугла

<button id="callback" class="phone">Первая</button>
<button class="phone">Вторая</button>
<button class="phone">Третья</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
   $(".phone").click(function () {
          alert (this.innerText);
    });
});

</script>

Цитата:

Сообщение от bilnaz

class=callback

$(function() {
    //фкнкция вызова формы обратной связи
    $('.callback').click(function(){
        //появление окна обратной связи
        $('#popup').fadeIn();
        //добавляем к окну иконку закрытия
        $('#popup').append('<a id="popup_close"></a>');
        //расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
        q_width = $('#popup').outerWidth()/-2;
        q_height = $('#popup').outerHeight()/-2;
        $('#popup').css({
            'margin-left': q_width,
            'margin-top': q_height
        });
        //выводим затемение страницы и делаем полупрозрачным
        $('body').append('<div id="fade"></div>');
        $('#fade').fadeIn();
        return false;
    });

    //функция закрытия окна
    $('body').on('click', '#popup_close, #fade',function() {
        $('#fade').fadeOut(function() {
            $('#fade').remove();
            $('#popup_close').remove();
            $('#popup').fadeOut();
        });
    });

});

Обновил javascript на полную версию.

Спасибо Dilettante_Pro за попытку, но так же неработает..(
1) с jquery-1.7.2.min.js Одна кнопка так же обрабатывается а другие две просто с классом никак не хотят. Да ещё окно выскакивает подтверждения события

А с "../1.12.4/jquery.min.js" вообше никакой реакции..

bilnaz,
css скиньте

Цитата:

Сообщение от рони

css скиньте

уже не надо, смотрите что у вас не так?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #popup {
    display: none;
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 2000;
    background:#eeeeee;
    width:420px;
    height: 330px;
    padding:10px 20px 20px 20px;
}
    *html #popup  {
        position: absolute;
    }

    #popup h3{
        color:#ab6969;
        font-size:30px;
        font-weight:normal;
        text-transform:uppercase;
        text-align:left;
        margin-bottom:20px;
    }

    #popup p {
        padding-bottom:15px;
        text-align: center;
    }

    #imgcode {
        float:left;
    }

    #popup input[type=text] {
        text-align:left;
        width:268px;
        padding:0 10px;
        height:30px;
        display:block;
        margin:10px 0px;
        border:1px solid #eee;
        border-top-color:#ccd1d7;
        color:#000000;
        background:#ffffff;
        font-family: Arial, Tahoma, sans-serif;
        font-size: 12px;
    }
        #popup textarea {
            text-align:left;
            width:398px;
            padding:10px 10px;
            display:block;
            margin:10px 0px;
            border:1px solid #eee;
            border-top-color:#ccd1d7;
            color:#000000;
            background:#ffffff;
            font-family: Arial, Tahoma, sans-serif;
            font-size: 12px;
            height: 80px;
        }
            #popup .button {
                font-size: 16px;
                box-sizing: border-box;
                background: #ab6969;
                width: 140px;
                height: 35px;
                line-height: 35px;
                display: block;
                text-align: center;
                text-decoration: none;
                color: #ffffff;
                float:right;
                text-shadow: none;
                border: 1px solid #705062;
                border-radius: 0;
            }
                #popup .button:hover {
                    background: rgba(171, 105, 105, 0.88);
                 }

    #popup_close {
        display:block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 12px;
        height: 12px;
        background: url(http://lessons.polyakov.co.ua/popup/images/close.png) no-repeat center center;
        cursor: pointer;
        z-index: 2103;
    }

    #popup_close:hover {
        opacity:0.7;
        transform: rotate(90deg);
        transition: all 0.5s ease-in-out 0s;
    }
#fade {
    display: none;
    background: #2c3e50;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .50;
    z-index: 1000;
}

    *html #fade {
        position: absolute;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
// =========================================================================  go_order
$(function() {
    //фкнкция вызова формы обратной связи
    $('.callback').click(function(){
        //появление окна обратной связи
        $('#popup').fadeIn();
        //добавляем к окну иконку закрытия
        $('#popup').append('<a id="popup_close"></a>');
        //расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
        q_width = $('#popup').outerWidth()/-2;
        q_height = $('#popup').outerHeight()/-2;
        $('#popup').css({
            'margin-left': q_width,
            'margin-top': q_height
        });
        //выводим затемение страницы и делаем полупрозрачным
        $('body').append('<div id="fade"></div>');
        $('#fade').fadeIn();
        return false;
    });

    //функция закрытия окна
    $('body').on('click', '#popup_close, #fade',function() {
        $('#fade').fadeOut(function() {
            $('#fade').remove();
            $('#popup_close').remove();
            $('#popup').fadeOut();
        });
    });

});

  </script>
</head>

<body>
<div id="popup">
    <form id="contact_form" role="form" method="post" action="./php/order.php">
        <h3>Напишите нам</h3>
        <input type="text" name="name"  placeholder="Как к вам обращаться?">
        <input type="text" name="tel"  class="required" placeholder="Контакный телефон (обязательно)">

        <input type="hidden" name="send" value="1">
        <textarea name="message" placeholder="Текст сообщения(НЕ обязательно)" rows="5"></textarea>
        <a href="#" class="btn button form_submit">Заказать</a>
    </form>
</div>
<button class="callback">callback01</button>
<button class="callback">callback02</button>
<button class="callback">callback03</button>
<button class="callback">callback04</button>
<button class="callback">callback05</button>
<button class="callback">callback06</button>
<button class="callback">callback07</button>
<button class="callback">callback08</button>
<button class="callback">callback09</button>
<button class="callback">callback10</button>
<button class="callback">callback11</button>
<button class="callback">callback12</button>
<button class="callback">callback13</button>
<button class="callback">callback14</button>
<button class="callback">callback15</button>
<button class="callback">callback16</button>
<button class="callback">callback17</button>
<button class="callback">callback18</button>
<button class="callback">callback19</button>
<button class="callback">callback20</button>
</body>
</html>

ДА!) Всё заработало!) Спасибо Вам огромное рони !:yes:

Возможно и у Dilettante_Pro тоже всё работало, просто у меня руки видимо недостаточно прямые..))

bilnaz,

Цитата:

Сообщение от bilnaz

Возможно и у Dilettante_Pro тоже всё работало

Что значит - возможно? А вы запускали пример пост 5?