V
V
VitStar2015-10-06 22:50:19
JavaScript
VitStar, 2015-10-06 22:50:19

Display value Radio?

Good laziness! There was a need to display the value of the selected Radio element.
Found this code

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 code
<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>

But there was a need to display one more such form below. But what would work separately .
When I insert now I
change the name of the name field
<input type="radio" name="projecttype2" value="от 1000 руб.">

And also change 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;
}

But only 1 form works .
And after below, you will need to add a few more.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
amatory10, 2015-10-07
@VitStar

The problem is that window.onclick attaches one function that runs without a context, so it only works for one form.
For example, you can do this, add a unique class of type form1 to each form, etc. and onclick="onclickRadio(this.className)", js change like this:

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;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question