Empty value in the combobox is encountering an exception

[venky424]

Below piece of code is used to create combobox and read the values from combobox for inserting into the database. if there is no value selected in the conbobox, JavaScript is throwing an error as it is empty. Could you please advise how to fix this.

Combobox from HTML body:

<div class="col-md-2"><select  name="sample" class="form-control" id="sample" ><option selected="selected" id=""></option>
<c:forEach  var="com1" items="${tbcrb}">
<option id="${com1.getlistid()}" value="${com1.getlistid()}">${com1.getlistitem()}</option>
</c:forEach>
</select>
</div>

JavaScript to convert simple select element into combobox:

$(document).ready(function() {
 $('#sampleform').find('[name="sample"]') .combobox().end()
});

var sample= document.getElementById("sample").options[document.getElementById("sample").selectedIndex].innerText;
var sampleid=encodeURIComponent(document.getElementById("sample").options[document.getElementById("sample").selectedIndex].id)

Below is the external .js and .css used.

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.17/js/jquery.dataTables.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.17/js/dataTables.bootstrap.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap.min.js"></script> 
	<script src="https://cdn.datatables.net/colreorder/1.5.2/js/colReorder.bootstrap.min.js"></script> 
	<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> 
	<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>  
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css"/>
	<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

[tiesont]

I see popper.js being loaded, but your CDN link is to Bootstrap 3, which doesn't require it - is that a typo?

[venky424]

Nope it is not type. I need popper.js as I am using tool tip in my project . And yes I am bootstrap 3 and it is working in my other application components and only in this case selecting empty value from combobox is not working..

[tiesont]

If the error you're referring to is coming from those two lines after your jQuery code, that's not really an issue with the combo box - you need some null checks. There are also much simpler ways to get the value you're trying to read.

This probably needs to be a Stack Overflow question.

[venky424]

Thanks. could you please suggest me any sample null checks if you are aware of ?

[weisborg]

There are a couple other bugs mentioning this. Just searching for popper finds them. It doesn't like when the list is empty, and there could be something to do with the parent change where the list is appended to the body now for some reason (Buttons and list/menu have different parents now). I ended up Just taking the popper lines out of the combobox code so it no longer checks if it is there or adds the data attributes. I get no errors now.