Как определить нажатие одной формы из нескольких, но при этом использовать 1 функцию(общую для всех форм)

428

05 февраля 2017, 14:15

Как определить нажатие и запустить функцию но при этом использовать одну функцию для множество повторяющихся форм. Сейчас поймете о чем я.

Вот есть такая форма. На странице может быть таких несколько в зависимости от количество строк В БД (не суть).

<div>
    <textarea id="comment_menu"></textarea> 
    <p id="submit-kom" iid="x">Отправить</p>                                        
</div>

А вот скрип определяющий нажатия и запускает функцию

$('#submit-kom').click(function(){
        var comment = $("#comment_menu").val();
        var iid = $("#submit_kom").attr("iid");
        if (comment != ""){
            comment_menu = '1';
            $("#comment_menu").css("borderColor","#DBDBDB");
        }else{
            comment_menu = '0';
            $("#comment_menu").css("borderColor","#FDB6B6");
        }             
        if ( comment == '1'){
            $("#submit-kom").hide();
            $.ajax({
            type: "POST",
            url: "../xxx/xxx.php",
            data: "id="+iid+"&comment="+comments,
            dataType: "html",
            cache: false,
            success: function(data) {
            if (data == 'yes'){
                $("#submit-kom").show();
            }
            }
            });  
        }         
    });

Проблема в том что на странице присутствует не одна кнопка оправить с id="submit-kom" и поэтому функция не срабатывать по нажатию на одну из кнопок. Как сделать чтобы все работало? может через onclick или что-то похожее, надо чтобы js определял что нажата кнопка отправить но с определенным индексом или id

Answer 1

Не используйте повторяющиеся id, а используйте повторяющиеся классы.

(Откуда берется переменная comments?)

<form>
  <div>
    <textarea class=".comment_menu"></textarea> 
    <p class=".submit-kom" iid="x">Отправить</p>                                        
  </div>
</form>

$('.submit-kom').click(function() {
    var commentMenu = $(this).closest("form).find(".comment_menu");
    var comment = commentMenu.val();
    var iid = $(this).attr("iid");
    var comment_menu;
    if (comment != "") {
        comment_menu = '1';
        commentMenu.css("borderColor","#DBDBDB");
    } else {
        comment_menu = '0';
        commentMenu.css("borderColor","#FDB6B6");
    }             
    if ( comment_menu == '1') {
        $(this).hide();
        $.ajax({
          type: "POST",
          url: "../xxx/xxx.php",
          data: { id: iid, comment: comment },
          dataType: "text",
          cache: false,
          success: (function(data) {
            if (data == 'yes'){
              $(this).show();
            }
          }).bind(this)
        });  
    }         
});