I have a webpage with 3 radio buttons, Create, Update, and Suppress, and form with input fields and dropdown selectors. The form input fields and dropdown selectors visible to the user are dynamic based on which of the radio buttons is selected. My current code is demonstrating unexpected behavior when I refresh the page.
When I first browse to the page in debug, all 3 radio buttons' views are as expected, as far as the delete dropdown (deleteid) being hidden from view in all but the Suppress view. However, if I click refresh in the browser, it returns to the Create radio button (which is expected), but the delete dropdown suddenly appears on the Create page. Repeated refreshes demonstrate the same behavior, and the delete dropdown selector continues to appear on the Create page. Why is this happening?
Here is the code:
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
// Hide show inputs
$('input[type=radio][name=group]').change(function() {
if (this.value == 'create') {
$('#proid').hide();
$('#deleteid').hide();
$('.fields').show();
} else if (this.value == 'update') {
$('#proid').show();
$('#deleteid').hide();
$('#btnSearch').show();
$('.fields').show();
} else if (this.value == 'suppress') {
$('#proid').show();
$('#deleteid').show();
$('#btnSearch').hide();
$('.fields').hide();
}
});
});<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body class="body-custom">
<div class="container">
<div class="form">
<div class="row">
<form id="form" action="">
<div class="row">
<div class="type">
<label>
<input class="with-gap" name="group" value="create" type="radio" checked />
<span>Create</span>
</label>
<label>
<input class="with-gap" name="group" value="update" type="radio" />
<span>Update</span>
</label>
<label>
<input class="with-gap" name="group" value="suppress" type="radio" />
<span>Suppress</span>
</label>
</div>
</div>
<div id="proid" class="row">
<div class="input-field col s11">
<input id="profile_id" type="text" class="validate">
<label for="profile_id">Profile ID</label>
</div>
<div class="input-field col s1">
<a id="btnSearch" class="btn-floating btn-small waves-effect waves-light teal lighten-2"><i class="material-icons">search</i></a>
</div>
</div>
<!-- Delete Reason -->
<div id="deleteid" class="row">
<div class="input-field col s12">
<select class="js-example-basic-single" name="deletereason" id="deletereason">
<option value="" disabled selected>Choose delete reason</option>
<option value="1">Reason 1</option>
<option value="2">Reason 2</option>
<option value="3">Reason 3</option>
</select>
</div>
</div>
<div class="row fields">
<div class="input-field col s12">
<input id="name" name="name" type="text" class="validate">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>EDIT 1: I should also highlight that if I switch to Update view, then switch back to Create view, the delete dropdown then is NOT on the Create view any longer. But as soon as I click Refresh, it comes back
