Динамичное изменение количества submit?

Question

[Дмитрий Макаров]

есть фрейм в который по событию добавляются поля ввода с отправкой post запроса по нажатию кнопки. как написать скрипт обработки кнопок submit при их динамическом количестве?
код для одной кнопки

window.onload = function(){
    var inbox = document.getElementById('inbox');
    inbox.scrollTop = inbox.scrollHeight;
    var socket = new SocketHandler();
    var form = document.getElementById('messageform');

    form.onsubmit = function(e){
        socket.send_message(form);
        return false;
    };
    form.onkeypress = function(e){
        if (e.keyCode == 13) {
            socket.send_message(form);
            return false;
        }
    };
    document.getElementById('message').select();
};

как его преобразовать для нескольких form и кнопок submit?

Comments

[Merzley]

Вопрос 1. Это код рабочий? Его просто нужно модифицировать?
Вопрос 2. Предполагается, что будет несколько форм и у каждой одна кнопка для сабмита, или одна форма с несколькими кнопками? Просто в данном случае обрабатывается не кнопка, а событие отправки формы, т.е. это уже должно работать для любого количества кнопок, сабмитящих данную форму.

[Дмитрий Макаров]

Merzley, 1. да код рабочий; 2. несколько форм и у каждой одна кнопка.

Answer 1

[Дмитрий Макаров]

подсказали мне решение, так заработало

var elems = document.getElementsByName('send_post');
for (var i = 0; i < elems.length; i++) {
    elems[i].onsubmit = function(e){
        socket.send_message(this); // !!! form -> this
        return false;
    };
};

Answer 2

[Vladimir]

Собирать в коллекцию все элементы не по id, а например по TagName или ClassName и обходить циклом.

Comments

[Дмитрий Макаров]

я их собрал

var elems = document.getElementsByName('send_post');
    for (i = 0; i < elems.length; i++) {
        var form = elems[i];
        form.onsubmit = function(e){
            socket.send_message(form);
            return false;
        };
        form.onkeypress = function(e){
            if (e.keyCode == 13) {
                socket.send_message(form);
                return false;
            } }; };

но корректно работает лишь последний из существующих submit-ов

[Vladimir]

Попробуйте без var в этой строке form = elems[i];

[Дмитрий Макаров]

Bigata, попробовал - так тоже работает корректно только последний submit. сама форма

<form action="/" method="post" id="{{ message["uuid"] }}" name="send_post">
  <input type="hidden" name="user" value="{{ message["user"] }}">
  <input type="hidden" name="uuid" value="{{ message["uuid"] }}">
  <input name="comment" type="text" placeholder="{{ _('type comment here') }}">
  <button type="submit">{{ _('send') }}</button>
 </form>

например, если она присутствует два раза, то при введении данных в первую форму comment передается пустой, если же вводить данные во вторую, нижнюю, передается введенное значение comment.

[Vladimir]

atsman, что-то в голову ничего путного не приходит. Вот так у меня сработало:

Тынц

document.addEventListener("DOMContentLoaded", creature);
function creature(){
for (var i = 0; i < 3; i++){
var forma = document.createElement('form');
forma.id = 'forma' + i;
document.body.appendChild(forma);
var buttonInForma = document.createElement('button');
buttonInForma.id = 'buttonInForm' + i;
buttonInForma.type = 'submit';
buttonInForma.onclick = clickIt;
forma.appendChild(buttonInForma);
}
function clickIt(e){
event.preventDefault;
alert (e.target.id + ' меня шмякнули');
}
}
document.getElementById('mainB').onclick = function(){
var allbuttons = document.getElementsByTagName('button');
for (var j = 0; j < allbuttons.length; j++){
itId = 'buttonInForm' + j;
document.getElementById(itId).click();
}
}

Если нажать на кнопку Тынц, то скрипт обходит все кнопки с id, который начинаются на buttonInForm и кликает их.

[Дмитрий Макаров]

Bigata, попробовал подобным образом, не получилось

[Vladimir]

А что именно не получилось? У меня вроде работал мой вариант.