how to bind a form with jQgrid?

I have a form with 3 text field and 2 combobox...I have send those data to server based on which my jqGrid will be populated...I can append the parameter like &text1=&text2& etc. Can someone point me towards an example based on binding form with jqGrid. Thanks!

UPdate1: my approach

<script type="text/javascript">
//<![CDATA[
  jQuery(document).ready(function(){

     var url = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $("#inventoryForm").serialize();

    navMenu();

  jQuery("#inventoryInq").jqGrid({
                    sortable:true,
                    url: '',
                    datatype:'json',
                 colNames:['LPN','SKU', 'Location Description', 'Location Type','Pallet Status','On Hand Quantity', 'Inducted Quantity','Rejected Qty','Hold?','Expiration Date' ], 
                 colModel:[  {name:'lpn',index:'lpn', width:85, sorttype:"int", align:"center", key:true},
                             {name:'sku',index:'sku', width:40, sorttype:"int", align:"center"},
                             {name:'locationDescription',index:'locationDescription', width:130, align:"center"},
                             {name:'locationType',index:'locationType', width:100, align:"center"}, 
                             {name:'palletStatus',index:'palletStatus', width:80, align:"center", sorttype:"int"},
                             {name:'onHandQuantity', index:'onHandQuantity',width:130, align:"center", sorttype:"int"},
                             {name:'inductedQuantity', index:'inductedQuantity', width:115, align:"center", sorttype:"int"},
                             {name:'rejectedQuantity', index:'rejectedQuantity', width:120, align:"center", sorttype:"int"},
                             {name:'hold',index:'hold', width:60,align:"center", sorttype:"int"},
                             {name:'expirationDate', in开发者_StackOverflow社区dex:'expirationDate',width:120, align:"center"} ],

               rowNum:10,
               rowList:[10,20,30],
               jsonReader : {repeatitems: false,
                    root: function(obj) {
                        return obj;
                    },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
                },
               pager: '#pager',
               sortname: 'LPN',
               sortorder: "desc",
               loadonce:true,
               viewrecords: true,
               multiselect: true,
               caption: "Inventory Inquiry",
               height:230 
             }); 
          jQuery("#inventoryInq").jqGrid('navGrid','#pager',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true});
         jQuery("#inventoryInq").jqGrid('hideCol', 'cb');


  }) ;   

  $("form#inventoryForm").submit(function() {
        var newUrl = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $(this).serialize();
        $("#inventoryInq").jqGrid("setGridParam","url", url).trigger("reloadGrid");
        return false;
    });


//]]>
</script>

---

In general suggestion of JacobM is good, but there are some details.

First the textes text1 and text2 could contain a special symbols which are not allows in URL, so they should be better url-encoded and instead of + text1 + "&text2=" + text2 one should better use + encodeURIComponent(text1) + "&text2=" + encodeURIComponent(text2). The jQuery function jQuery.param() do this internaly, so instead of

var url = "http://www.mySite.com/gridRequestURL?text1=" + text1 + "&text2=" + text2;

we can use

var url="http://www.mySite.com/gridRequestURL?"+$.param({text1:text1, text2:text2});

Moreover jQuery has one more nice function to make encoding of all input fields (input and select fields and checkboxes) of one form: jQuery.serialize(). If you choose the names of the form parameters exactly like you want to have server parameters, then the new url can be just

var url = "http://www.mySite.com/gridRequestURL?" + $("#fpForm").serialize();

(where "fpForm" is id of the form) and the full code could looks like following

$("form#fpForm").submit(function() {
    var newUrl = "/cpsb/cPSBBusinessErrors.do?" + $(this).serialize();
    $("#gridId").jqGrid("setGridParam","url", url).trigger("reloadGrid");
    return false;
}

Take in consideration that, if you use postData parameter of jqGrid, the url will be automatically appended with the information from postData (target url will be combined from url and postData).

You can also consider to use only postData parameter, but as a function as described in How to filter the jqGrid data NOT using the built in search/filter box, then you should use only trigger("reloadGrid") without changing of url. The login of reading values from the form fields you should implement in the functions from postData.

If you use HTTP POST (mtype: "POST") and not default GET you can set postData parameter with the same information as described above instead of appending the information to the url parameter.