Austin Dennis Austin Dennis - 2 months ago 12
jQuery Question

Submit form without refresh after selection from dropdown

I'm trying to set up a form so that it submits (without refreshing the page) when a selection is made from a dropdown menu. I currently have it set to submit when the dropdown is select, but it refreshes the page.

My code for the form is,

<form action="" method="get">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon"><?php echo $monday; ?></option>
<option value="Tue"><?php echo $tuesday; ?></option>
<option value="Wed"><?php echo $wednesday; ?></option>
<option value="Thu"><?php echo $thursday; ?></option>
<option value="Fri"><?php echo $friday; ?></option>
</select>
</form>


I've tried several jquery tutorials on submitting forms without a refresh, but they all involve a submit button. I need one that binds the submitting of the form to when a choice is selected in the dropdown.

Any help would be much appreciated.

EDIT: Solved
Using some of the ideas from the answers here, some tutorials, and a lot of trial/error. I finally got it figure out. Here is the code that works

$('#day').change(function()
{
$.ajax({
type: 'post',
url: "tutoringlistsession.php",
data: $("form.day").serialize(),
success: function() {
$('#list').load('tutoringlist.php', function(){
});
$('#list').show("fast");
}
});
return false;
});

Answer

I used the ideas posted in here and several tutorials to figure out the answer. The working code is below:

$('#day').change(function() 
{
   $.ajax({
        type: 'post',
        url: "tutoringlistsession.php",
        data: $("form.day").serialize(),
        success: function() {
            $('#list').load('tutoringlist.php', function(){
            });
            $('#list').show("fast");
        }
    });
                return false;
});
Comments