Javascript-форум - Подсчет данных с форм

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

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

- - Подсчет данных с форм (https://javascript.ru/forum/misc/62089-podschet-dannykh-s-form.html)

Подсчет данных с форм

Здравствуйте!
Я новичок в js, возникла такая проблема:
Необходимо, чтобы некий скрипт собирал данные со всех input'ов, находящихся на странице (в том числе и checkbox'ов, принимая их за 1/0), и затем по нажатию на кнопку подставлял их в некую формулу в нужные места (в зависимости соответственно от id (или name, я не уверен) начального input'а) и выводил готовый результат в виде текста.

Несколько дней пробовал сделать, находил разные варианты, и через js, и через php метода post, но не смог до конца приспособить ни один.

Собственно, хотел бы попросить показать мне код, который будет делать то, что я описал выше, и желательно самый-самый простой изо всех вариантов, чтобы я смог дописывать туда новые input'ы или функции сам. Пожалуйста:)

MikFreeD,
сделайте небольшой макет, и куда собирать?

Цитата:

Сообщение от рони (Сообщение 411866)

MikFreeD,
сделайте небольшой макет, и куда собирать?

Собирать - не знаю, не имеет особого значения. Главное, чтобы они подставлялись в формулу.
Вот макет - нажатие на картинку должно создать под ней абзац, в котором появится любой текст и число, подсчитанное по некой формуле с использованием данных из input'ов. (например: "input1"+"input2"-"input3"+"100*"input4"")

<html>
<body>
<form>
<input id="1" type="text" name="1">
<input id="2" type="text" name="2">
<input id="3" type="text" name="3">
<input type = 'checkbox' id = '4' name="4">
</form>
<img src="#">
</body>
</html>

MikFreeD,

<html>
<body>
<form>
<input id="1" type="text" name="1">
<input id="2" type="text" name="2">
<input id="3" type="text" name="3">
<input type = 'checkbox' id = '4' name="4">
</form>
<img src="http://javascript.ru/forum/images/smilies/smile.gif">
<p></p>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('form'),
  input = form.querySelectorAll('input'),
  img = document.querySelector('img'),
  p = document.querySelector('p'), arr;
  img.addEventListener('click', function() {
  arr = [].map.call( input, function(i) {
         return i.type == 'checkbox' ? +i.checked : (+i.value||0)
     },0);
  p.innerHTML =  arr[0]+ arr[1] - arr[2] + 100 * arr[3]
  });
    });
</script>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 411917)

MikFreeD,
<html>

Спасибо! Скрипт будет автоматически собирать данные с каждого input'a и checkbox'a и считать их arr[4], arr[5] и так далее?