Jquery select without form submit

i want to make a selector for the users to order prices in asc/desc order in a virtual store.

The problem is that i don't want to use a form (that will be submitted every time the page refreshes, etc). So, i want a select (jquery select) outside a form, so that when a user chooses an option, i can set the value of a php variable (in order to know 开发者_Python百科how will i make the sorting).

is it possible to make this ordering using a select, outside of a form (using Jquery)? Is it possible to set a php variable onselect the list element? (until now, i used to send by post value, and to set that variable according to the post data received from the form)

Thank you

Try using AJAX instead of a form submit. There are many ways to do this..

$('select').change(function() {
    $.post($(this).closest('form').attr('action'), $(this).closest('form').serialize(), function(data) {
        alert(data);//response from PHP
    });
});

Keep the select within the form here for backwards compatibility and add this event handler:

$('form').submit(function() {
    return false;
});

No forms version, set your own options:

var href = 'http://yoursite.com';

$('select').change(function() {
    $.post(href, { val : $(':selected', this).val()}, function(data) {
        alert(data);//response from PHP
    });
});

If you just want to prevent the page from refreshing, you can return false in the onsubmit-event callback.

You don't need a form to activate the "change" event on a select. Just get your select in jQuery and bind a "change" event to it.

$(function()
{

   $("select").change(function()
   {

       // Do something

   });

});

You can use the "change" event for the select and send an ajax call (fairly painlessly using jQuery). You will want to read up on Ajax so you get the basic idea (I'm certain there is a posting here for it) and look at the jQuery api on ajax.

Ajax is a method to post/get information back to the server without using a form or reloading the entire page. An example of how to do with a select would be:

$("#yourSelectID").change(function(){
    $.ajax({
        url:"site.php",
        data:{"returnVal":$(this).val()},
        success:function(){ /* do any further processing stuff here */}
    });
});

Note that when you run your ajax call other events on the page will run at the same time so don't expect the ajax happen in the stack order.