<div class="form-group" style="text-align: right;">
<label for="city">Select No Rows Per Page</label>
<select class="form-control" name="selectrows" style="width: 70px; text-align: right;">
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
index.php
I want to refresh index.php on select option.
If you really want to do it this way, you somehow need to get the selected option to the "reloaded" page. You could do this as a GET parameter in the URL. So add this:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName('select')[0].addEventListener('change', (e) => {
location = 'index.php?selectrows=' + e.target.options[e.target.selectedIndex].value;
});
});
</script>
In the PHP script you can then access the selected value using $_GET['selectrows']
Try the following code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function doReload(catid){
document.location = 'samepage.php?catid=' + catid;
/* But if you want to submit the form just comment above line and uncomment following lines*/
//document.frm1.action = 'samepage.php';
//document.frm1.method = 'post';
//document.frm1.submit();
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select name="catid" id="catid" onChange="doReload(this.value);">
<option value="" selected="selected">---All Category---</option>
<option value="1">Category One</option>
<option value="2">Category Two</option>
</select>
</form>
</body>
</html>
