Передача выбранного значения select с помощью ajax
 

День добрый! Вопрос в следующем.
Есть список <select>, содержащий в себе наименования категорий. Изначально стоит задача получить выбранное значение из списка select и отправить его в качестве результата заполнения формы на сервер, чтобы впоследствии записать ее в переменную php и осуществить запрос к базе данных.
В интернетах нашлась функция, позволяющая отправлять выбранное значение поля select на сервер и возвращать полученное значение.

<script type="text/javascript">
		(function($){		
		function typeOfPage(){
		var page =$('select[name="category_name"]').val();
		$.ajax({
                type: "POST",
                url: "ajax.php",
                data: {page: page},
                           
                success: function(data) {
                             $('#ajax_reciever').html(data);
                            }
				});
				};
				  })(jQuery);
			</script>

ajax.php

<?php echo $_POST['page'].' '; ?>

HTML

<select id="category_id" name="category_name" class="inputbox" onchange='typeOfPage(); '>
//значения списка
</select>

Вопрос дурацкий, но сама разобрать не могу. Функция была обернута мной в (function($){...})(jQuery); так как это было решением проблемы с ошибкой: "Cannot call method 'val' of null". Теперь в консоли выдается ошибка: "Uncaught ReferenceError: typeOfPage is not defined", хотя описание функции прописано раньше в коде, чем ее вызов.

Ага, вот только она теперь не глобальная. Ее не видно снаружи (за пределами) функции (function($){})(jQuery)

Как быстрый фикс - объявлять функцию как свойство глобального объекта:

window.typeOfPage = function() {....

К слову, ради аякса и получения значения из селекта не нужно подключать jQuery. Гораздо лучше заменить на чистый js-код. Если же jQuery используется по-полной, то лучше ничего не менять.