Parsing the url querystring using jquery and inserting the value in a textbox?

Question

post.php?replyto=username&othervariable=value

For example, if I click a link with this url, then I want to take the replyto=username value and insert the value in a textbox using jquery.

function insertParamIntoField(url, param, field) { 
       var anchor = document.createElement('a'), query;
       anchor.value = url;
       query = anchor.query.split('&');

       for(var i = 0, kv; i < query.length; i++) {
          kv = query[i].split('=', 2);
          if (kv[0] == param) {
             field.value = kv[1];
             return;
          }
       }  
    }

    $("a .reply").click(function () {
       insertParamIntoField(this.href, "replyto", $("input .inputField")[0]);
       return false; // prevent default action
    });

this is my html code:

<textarea name="inputField" id="inputField" tabindex="1" rows="2" cols="40"></textarea>
<a class ="reply"  href="home.php?replyto=username">reply</a>

Answer 1

$('textarea').val("<?php echo $_GET['replyto']");

Answer 2

function insertParamIntoField(url, param, field) { 
   var anchor = document.createElement('a'), query;
   anchor.href = url;
   query = anchor.search.substring(1, anchor.search.length).split('&');

   for(var i = 0, kv; i < query.length; i++) {
      kv = query[i].split('=', 2); console.log(kv);
      if (kv[0] == param) {
         field.value = kv[1];
         return;
      }
   }  
}

$("a.reply").click(function () {
   insertParamIntoField(this.href, "replyto", $("textarea.inputField")[0]);
   return false; // prevent default action
});

The insertParamIntoField function will work for any well formed URL (as a string). It works by creating a new anchor DOMElement (but never attaches it to the dom) for that URL and then by using the built in properties of anchor elements (query, hash, etc.) to extract what we want.

If the URL is from an anchor element, we can create a new version of this function that uses that existing anchor rather than creating a new one:

function insertParamIntoField(anchor, param, field) { 
   var query = anchor.search.substring(1, anchor.search.length).split('&'); // anchor is a DOMElement 

   for(var i = 0, kv; i < query.length; i++) {
      kv = query[i].split('=', 2);
      if (kv[0] == param) {
         field.value = kv[1];
         return;
      }
   }  
}

$("a.reply").click(function () {
   insertParamIntoField(this, "replyto", $("textarea.inputField")[0]);
   return false; // prevent default action
});

Answer 3

Parsing the URL can be done with a simple function. Use this in your Javascript:

$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
  return results[1] || 0;
}

You can then call:

$.urlParam('username');

and it will return the user name. So, to actually use it with your text box, do:

$('#textBoxId').val($.urlParam('username'));

Answer 4

Using the code from this SO answer (which is great btw) by Artem Barger to get any parameter by name from the query string you could do:

function getParameterByName( 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 decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

Then just insert the value into the textbox:

$("#yourTextBox").val(getParameterByName('replyto')); 

Answer 5

You should be able to grab the ?replyto=username&othervariable=value part with window.location.search, then you have to get the part you want

var print = '?replyto=username&othervariable=value'; // Would be window.location.search in practice
$('textBox').val(print.substr(print.indexOf('replyto=')+8,print.indexOf('&')-(print.indexOf('replyto=')+8)));

​