如何从URL中的单独表单传递值与JQuery一起？

Question

I have a separate form in the php page which also has Jquery jtable plugin to display data from Mysql database. The form has a drop down list boxes. i have to pass the values from those dropdown along with the Jtable action List in the url, to list table with respect to the condition selected from the drop down.

   <div id="machinelog">
    <form id="intermediate" name="inputMachine" method="post">
    <select id="selectMachine" name="selectMachine"> 
        <option value="M1" >Machine 1</option>
        <option value="M2" >Machine 2</option>
        <option value="M3" >Machine 3</option>
    </select>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<input id="Button" class="button" type="submit" value="Submit" />
</form>  

If i choose Machine 1 from the dropdown list, i have to make the jtable to display only the rows which has machine as Machine 1.

i have to access the form values inside the Jtable container so that i can pass those valus in the url.

   <div id="MachineLogTableContainer" style="width: 1000px; margin-left: 254px;margin-top: -440px;position: static;"></div>
    <script type="text/javascript">

        $(document).ready(function () {
            //var s=$('#selectMachine').val();
            //alert(s);
            var machineLogMessages = {
                    addNewRecord: '+ New Machine Log'
                };

            //Prepare jTable
            $('#MachineLogTableContainer').jtable({
                messages:machineLogMessages,
                title: 'Machine Log',
                paging: true, //Enable paging
                pageSize: 10,
                actions: {
                    listAction: 'MachineLogActions.php?action=list',
                    createAction: 'MachineLogActions.php?action=create',
                    updateAction: 'MachineLogActions.php?action=update',
                    deleteAction: 'MachineLogActions.php?action=delete'
                },
                fields: {
                    event_id: {
                        key: true,
                        edit: false,
                        title: 'Event Id',
                        width: '5.8693%',
                        create:false,
                        edit:false,
                        list: false
                    },
                    event_type: {
                        title: 'Event Type',
                        width: '9%',
                        options: 'MachineLogActions.php?action=list_type'
                    },
                    machine: {
                        title: 'Machine',
                        width: '16%',
                        options: 'MachineLogActions.php?action=list_name'
                    },
                    user: {
                        title: 'User',
                        width: '11%',
                        options: 'MachineLogActions.php?action=list_user'
                    },
                    timestamp: {
                        title: 'Timestamp',
                        width: '15%'
                    },
                    shift: {
                        title: 'Shift',
                        width: '9%',
                        options: 'MachineLogActions.php?action=list_shift'
                    },
                    reason: {
                        title: 'Reason',
                        width: '25%',
                        options: 'MachineLogActions.php?action=list_reason'
                    },
                    count: {
                        title: 'Count',
                        width: '3%'
                    }
                }
            });

            //Load person list from server
            $('#MachineLogTableContainer').jtable('load');

        });

    </script>

once i press the submit button, my listing url should also contain the machine value.

        listAction: 'MachineLogActions.php?action=list&MachineId=',+machineId

Is it possible in Jquery.

I tried like this

    var s=$('#selectMachine').val();
alert(s);

i get the following error in chrome

    Uncaught SyntaxError: Unexpected token ,

Answer 1

This thing solves my problem of filtering.

            select = document.getElementById("selectShift");
            select.onchange = function(){
                //alert(this.value); 
                //alert(this.innerHTML); 
            var options = this.getElementsByTagName("option");
            optionHTML = options[this.selectedIndex].innerHTML;  

            $('#ShiftLogTableContainer').jtable('load', {
                ShiftId: optionHTML
                });
            };

you should add it instead of

  $('#MachineLogTableContainer').jtable('load');