Tomasz Jeznach Tomasz Jeznach - 4 months ago 9
HTML Question

Multi select and div don't show

First problem:
RadioCheck should be a single select, but I don't know why its multi...

Second problem:
second if it doesn't work (console doesn't show any error ;/

How should it work?
I click first radiobutton, then function get the id of radio and shows the next div.
Next, else if check again radiobutton and it should shop next div (divgazkpz) - this doesn't work.

Code:
html

<div class="col-xs-6 col-md-4" id="selectbackground">
<form role="form" id="mainForm">
<p>Główny wybór:</p>
<label class="radio">
<input type="radio" name="gaz" id="gaz">Gaz
</label>
<label class="radio">
<input type="radio" name="gazspc" id="gazspc" disabled>Gaz skroplony pod ciśnieniem
</label>
<label class="radio">
<input type="radio" name="ciecz" id="gazspc" disabled>Ciecz
</label>
<label class="radio">
<input type="radio" name="gazspc" id="gazsspca" disabled>Gaz skroplony/schłodzony pod ciśnieniem atmosferycznym
</label>

<button type="button" class="btn btn-primary btn-sm" id="buttonmain" onclick="RadioCheck()">Dalej</button>
</form>

</div>

<!-- Wybór z pola GAZ -->

<div class="col-xs-6 col-md-4" id="divgaz" style="display: none;">
<form role="form" id="mainForm">
<p>Gaz:</p>
<label class="radio">
<input type="radio" name="gazkpz" id="gazkpz">Katastrofalne pęknięcie zbiornika
</label>
<label class="radio">
<input type="radio" name="gazws" id="gazws">Wypływ strumieniowy
</label>

<button type="button" class="btn btn-primary btn-sm" id="buttongazkpzws" onclick="RadioCheck()">Dalej</button>
</form>
</div>

<!-- Gaz : Katastrofalne pęknięcie zbiornika-->

<div class="col-xs-6 col-md-4" id="divgazkpz" style="display: none;">
<form role="form" id="mainForm">
<p>Katastrofalne pęknięcie zbiornika:</p>
<label class="radio">
<input type="radio" name="gazpk" id="gazpk">Pożar kulisty
</label>
<label class="radio">
<input type="radio" name="gazwcpg" id="gazwcpg">Powstanie chmury parowej / gazowej
</label>

<button type="button" class="btn btn-primary btn-sm" id="buttongazpkpwcpg" onclick="RadioCheck()">Dalej</button>
</form>
</div>


JavaScript:

function RadioCheck()
{
var x = document.getElementById("mainForm").checked;

if (x = gaz.checked)
{
document.getElementById('divgaz').style.display = 'block' ;
document.getElementById("buttonmain").setAttribute("disabled", "disabled");
}
else if (x = gazkpz.checked)
{
document.getElementById('divgazkpz').style.display = 'block' ;
document.getElementById("buttongazkpzws").setAttribute("disabled", "disabled");
}
else
{
alert('Nic nie wybrales');
}
}

function restart()
{
location.reload(true);
}

Answer

You've confused the name and value attributes.

The name determines what a group of options is called, of which one will be selected, so all the radio buttons in the group need the same name. Then, you can give each one a different value, and take the value of the selected one.

If you make a standard HTML form that submits to a server, the value of the selected option should be sent as a parameter pretty much automatically.

To do this via javascript (and jQuery specifically) you'd do:

$('button').click(function () {
  var my_value = $('[name=my_option]:checked').val();
  alert(my_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
   <label><input type="radio" name="my_option" value="option1" /> Option 1</label>
</p>
<p>
   <label><input type="radio" name="my_option" value="option2" /> Option 2</label>
</p>
<p>
   <label><input type="radio" name="my_option" value="option3" /> Option 3</label>
</p>
<p>
  <button>What is selected?</button>
</p>