Собрать данные формы с помощью JS или jQuery

Уперся вроде бы в простой вопрос.

Есть форма, которая формируется произвольным количеством полей на jquery, примерно такая

<form method="post" name="tests">

<h3>Добавить тест</h3><br><div id="quest">Добавить еще вопрос</div> 

<div id="answer">Добавить еще ответ</div>



<div id="test-list">Название теста: <input id="t_name1" size="55" type="text"><br>

Вопрос: <input id="t_quest1" size="55" type="text"><br>

Варианты ответа: <input id="answ11" size="55" type="text">

....

</form>

<button id="subm">Сохранить тест</button>

Пытаюсь получить данные формы

$("#subm").click(function () {

                var len=document.tests.elements.length;

                for(var i=0;i<len;i++) {

                    var val = document.tests.elements.value;

                 

                    $("#responce").append('<br>' + val);

                   

                }

                //var res = $('form').serializeArray();

                $("#responce").html(res.length);

                var data1 = $("#t_name1").val();

                $("#responce").append('<br>' + data1 +'|'+ len);



            });

количество элементов считает правильно, но записыввет потом только первый элемент, остальные не видит.

Как правильно сделать обход формы? с serialize не разобралсяпока - не понимаю.

Подскажите оптимальный вариант с примером кода

---------- Добавлено 07.05.2015 в 19:52 ----------

Отбой - разобрался со своим кодом. Но советам по правильному использованию serialize() буду благодарен.