Вывести значение Radio?

Question

[VitStar]

Добрый лень! Возникла необходимость вывести значение выбранного элемента Radio.

Нашел такой код

window.onclick = function onclickRadio() {
  var nameRadio = document.getElementsByName('projecttype');
  for (var i = 0; i < nameRadio.length; i++) {
    if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
        rezultatRadio = nameRadio[i].value;       
    }
  }
  document.getElementById('rezultatRadio').innerHTML = rezultatRadio;
}

Код html

<form action="">
	                               <div class="radioholder">
                                    <input type="radio" name="projecttype" value="от 100 руб.">
                                    <label for="pt_100">от 100</label>
                                  </div>
  <div class="radioholder">
    <input type="radio" name="projecttype" value="от 300 руб.">
    <label for="pt_300">от 300</label>
  </div>
   <div class="radioholder">
    <input type="radio" name="projecttype" value="от 500 руб.">
    <label for="pt_500">от 500</label>
  </div>
  <div class="radioholder">
    <input type="radio" name="projecttype" value="от 1000 руб.">
    <label for="pt_1000">от 1000</label>
  </div>
                            
                            <div class="radioholder">
    <input type="radio" name="projecttype" value="от 1500 руб.">
    <label for="pt_1500">от 1500</label>
  </div>
  <div class="radioholder">
    <input type="radio" name="projecttype" value="от 2000 руб.">
    <label for="pt_2000">от 2000</label>
  </div>
                            </form>

Но возникла необходимость вывести еще 1-ну такую форму ниже. Но что бы работали раздельно.
Когда сейчас я вставляю
Меняю название поля name

<input type="radio" name="projecttype2" value="от 1000 руб.">

И так же меняю js

window.onclick = function onclickRadio() {
  var nameRadio2 = document.getElementsByName('projecttype2');
  for (var i = 0; i < nameRadio2.length; i++) {
    if (nameRadio2[i].type === 'radio' && nameRadio2[i].checked) {
        rezultatRadio2 = nameRadio2[i].value;       
    }
  }
  document.getElementById('rezultatRadio2').innerHTML = rezultatRadio2;
}

Но работает только 1 форма.
А после ниже нужно будет еще несколько добавить.

Comments

[VitStar]

Хотя сегодня попробовал он выдает ошибку в консоле пишет Uncaught ReferenceError: onclickRadio is not defined

[VitStar]

Все решил спасибо. Нельзя оборачивать в $(document).ready(function() {});

Answer 1

[amatory10]

Проблема в том что window.onclick присоединяет одну ф-ию которая выполняется без контекста, поэтому она работает только для одной формы.
Можно например сделать так, в каждую форму добавить уникальный класс типа form1 и т.д. и onclick="onclickRadio(this.className)", js изменить так:

function onclickRadio(el) {
    var array = document.querySelectorAll('.' + el + ' input[type=radio]');
    for (var i = 0, max = array.length; i < max; i++) {
        if (array[i].type === 'radio' && array[i].checked) {
            rezultatRadio = array[i].value;
        }
    }
    document.querySelector('.' + el + ' #rezultatRadio').innerHTML = rezultatRadio;
}

Comments

[VitStar]

Или я чего то не понял. Но он не работает

[amatory10]

VitStar: jsfiddle.net/2f82o78g этот результат вы ожидали?

[VitStar]

Спасибо большое. Забыл про onclick="onclickRadio(this.className)"

[VitStar]

Хотя сегодня попробовал он выдает ошибку в консоле пишет Uncaught ReferenceError: onclickRadio is not defined