jquery - POST method is not working while clicking on the menu option in PHP -

i trying build menu website. when click on menu supposed post index.php nothing happening. have checked using console.log, values assign data-val in coming in hidden input not working. can put in right direction pointing out problem. thanks

here jquery

       $(document).ready(function($) {            $('ul li a').on('click', function() {                $('#shareto').val($(this).data('val'));            });        }); 

here html

    <form name="mainmenu" id="mainmenu" method="post" action="index.php">         <table border="0" cellpadding="0" cellspacing="0" width="100%">         <tr>             <td width="96%" height="50" background="images/headerpanel.jpg" valign="center">                 <font face="verdana" size="1" color="white"> <h1 align="center">abc company</h1></font>             </td>             <td width="3%" background="images/headerpanel.jpg" valign="center" align="right">                 <input type="submit" name="submit" value="logout" />             </td>             <td width="1%" background="images/headerpanel.jpg" valign="center"></td>         </tr>         </table>          <table border="0" cellpadding="0" cellspacing="0" width="100%">         <tr>             <td width="2%" bgcolor=#c11b17></td>             <td width="16%" bgcolor=#c11b17>                 <ul>                     <li><a href="#">maintanence</a>                         <ul>                             <li><a href="#" data-val="1-1">add category</a></li>                             <li><a href="#" data-val="1-2">add sub-category</a></li>                         </ul>                     </li>                     <li><a href="#">process order</a>                         <ul>                             <li><a href="#" data-val="2-1">ship order</a></li>                             <li><a href="#" data-val="2-2">change order status</a></li>                                 </ul>                     </li>                     <li><a href="#">reports</a>                         <ul>                             <li><a href="#" data-val="3-1">orders station</a></li>                             <li><a href="#" data-val="3-2">orders date</a></li>                             <li><a href="#" data-val="3-3">pending orders</a></li>                         </ul>                     </li>                     <input id="shareto" type="hidden" name="shareto">                 </ul>             </td>         </tr>         </table>     </form> 

you problem submit button of form used logout, if need use submit button logout, send menu item index need use ajax query , not needed "shareto" input element. afterwards in server side can redirect correct menu page. or vice versa.

here full code: client side js file:

$(document).ready(function($) {     $('ul li a').on('click', function() {         var menuitemindex = $(this).data('val');         $.ajax({           type: "post",           datatype:'json',           url: "index.php",           data: {                menuindex: json.stringify(menuitemindex)           },           success: function(data, textstatus, jqxhr) {               console.log(data.menu_location);               window.location = data.menu_location;           },           error: function(errormsg, textstatus, jqxhr) {               console.log(errormsg);               console.log(textstatus);               console.log(jqxhr);           }         });      }); }); 

server side index.php :

<?php      $menu_locations = array("1-1" => "url_1.html", "1-2" => "url2_.html");      $menu_item_index = json_decode($_post['menuindex']);       header("content-type: application/json");      echo json_encode(array("menu_location" => $menu_locations[$menu_item_index]));