Drop down menu on change do jquery function and sql query

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

possible duplicate of [Get query string values in JavaScript](http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript) — Michael Berkowski, Feb 16 '12 at 01:37
Thanks Michael for that question link, I tried looking at as many of them as I could.. — klye_g, Feb 16 '12 at 01:47

score 1 · Answer 1 · answered Feb 16 '12 at 01:40

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];
  }
});

André Alçada Padez · Accepted Answer · 2012-02-16T02:17:04.750

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>

Sorry I do not know javascript – klye_g Feb 16 '12 at 02:09 — klye_g, Feb 16 '12 at 02:09
try it now, page_id was not defined – André Alçada Padez Feb 16 '12 at 02:17 — André Alçada Padez, Feb 16 '12 at 02:17

Drop down menu on change do jquery function and sql query

2 Answers2