Drop down menu on change do jquery function and sql query - php

Question

I am trying to get a sql query to run on drop down menu selection. Here is what I have so far:
<script>
$('#templateid').change(function(DoUpdateOnSelect) {
$.post('page.edit.php?page_id=(-->Need help in getting this id from the page url<--)&template='+this.options[this.selectedIndex].value);
});
</script>
And the drop down:
<select name="templateid" id="templateid" onchange="DoUpdateOnSelect">
<option >Contact</option>
<option >News</option>
<option >Home</option>
</select>
page.edit.php has conditions on it which will run the sql query if it detects the page id and the template in the URL. The template parameter value is grabbed with the jquery (please let me know if that part is set up wrong in the jquery) from the select drop down menu. What I can't figure out is how to grab the page_id parameter from the current url of the page, and insert that into the function so that the page.edit.php?page_id=1&template=Home will be the correctly outputted URL.
Please let me know if you need further information. Thanks in advance.
EDIT: BASED ON ANSWER BELOW:
function querystring(name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
$('#templateid').change(function() {
var page_id = querystring('page_id');
var url = '?VIEW=EDITPAGE&linklabel='+page_id+'&template='+(this.options[this.selectedIndex].value);
$.post(url);
});
NO CHANGE IS HAPPENING WHEN I MAKE A SELECTION IN THE DROP DOWN MENU

Answer 1

for getting the page_id from the url you should use a function like
function querystring( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
then you could retrieve it with
var page_id = querystring('page_id');
so, your onchange handler would look something like:
$('#templateid').change(function() {
page_id = querystring('page_id');
var url = 'page.edit.php?page_id='+page_id+'&template='+this.options[this.selectedIndex].value);
$.post(url, function(response){
//your logic here
});
});
oh, and please remove the onchange attribute from the select markup:
<select name="templateid" id="templateid">
<option >Contact</option>
<option >News</option>
<option >Home</option>
</select>

Answer 2

Try using this plugin
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});