Hidden Input is not posting while clicking on the menu

[Dimufa]

I have a menu on top of my page built using UL LI tags. I have a hidden input tag linked to menu using JQuery event. When clicked, option can be seen in the console.log but is not being posting to a PHP scritp. I need help here, can someone put me in the right directionHere is HTML\[code\]<form name="mainmenu" id="mainmenu" action="index.php" method="post"> <div id='content'> <div id='jqxMenu'> <ul> <li>Maintanence <ul style='width: 180px;'> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addCategory">Add Category</a></li> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addSubCategory">Add Sub-category</a></li> </ul> </li> <li>Process Order <ul style='width: 180px;'> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addShipOrder">Ship Order</a></li> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addChangeOrder">Change Order Status</a></li> </ul> </li> <li>Reports <ul style='width: 180x;'> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addOrderStation">Orders by station</a></li> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addOrderDate">Orders by date</a></li> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="addPendingOrder">Pending Orders</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15866529/#" data-val="Logout">Logout</a></li> </ul> </div> <div><input id="menuoption" type="hidden" name="menuoption"></div> </div></form> \[/code\]here is JQuery\[code\] $(document).ready(function ($) { $('#jqxMenu a').on('click', function() { $('#menuoption').val($(this).data('val')); }); });\[/code\]here is PHP script\[code\] if (isset($_POST['menu_index'])) { if ($_POST['menu_index'] == 'Logout') { $smarty->display("login.tpl"); exit(); } }\[/code\]