JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<fieldset data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" onclick="showType('1month');" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" onclick="showType('2dates');" />
<label for="btwdates">Mileage between two dates</label>
</fieldset>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" style="display:none;">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
JavaScript
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function