I have these radio buttons on a page and a button to go to the next page. (Called 'Doorgaan'). In the next page, I have this h2 with id "CatNaam" of which I want the value [CATEGORIENAAM] to be changed into the value of the checked radio button. How do I do this?
<div data-role="page" id="beoordelen" data-theme="a">
<div data-role="header">
<h1>Beoordelen</h1>
<a class="ui-btn-left" data-theme="a" data-rel="back">Vorige</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Kies categorie</h2>
<form id="oordeelKeuze" method="get">
<p>
<input type = "radio" name = "categorie-oordeel" id = "goedkoop-bier" value = "Goedkoop bier" checked = "checked" />
<label for = "goedkoop-bier">Goedkoop bier</label>
</p><p>
<input type = "radio" name = "categorie-oordeel" id = "muziek" value = "Muziek" />
<label for = "muziek">Muziek</label>
</p><p>
<input type = "radio" name = "categorie-oordeel" id = "gezelligheid" value = "Gezelligheid" />
<label for = "gezelligheid">Gezelligheid</label>
</p>
</form>
<p><a href="#beoordelen2" data-direction="reverse" data-role="button" data-theme="b">Doorgaan</a></p>
</div><!-- /content -->
</div><!-- /beoordelen -->
<!-- Start of fifth page: #beoordelen2 -->
<div data-role="page" id="beoordelen2" data-theme="a">
<div data-role="header">
<h1>Beoordelen</h1>
<a class="ui-btn-left" data-theme="a" data-rel="back">Vorige</a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Geef cijfer voor</h2>
<h2 id="CatNaam">[CATEGORIENAAM]</h2>
</div>
</div>
Using jQuery, give your button (Doorgaan) an id:
<p><a href="#beoordelen2" data-direction="reverse" data-role="button" data-theme="b" id="buttonID">Doorgaan</a></p> //buttonID in this case
and on your button (Doorgaan) on click add this:
$('#buttonID').click(function(){
var selectedRadio= $("input[type='radio'][name='categorie-oordeel']:checked").val();
$('#CatNaam').text(selectedRadio);
})
Here is the working example in a fiddle: