Is there something wrong with this jQuery?

Question

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>

What I'm trying to do is to insert the value from the reply URL into the textbox using Ajax, just like Twitter. If you know what I mean?

Answer 1

I haven't tested the overall script function, but you need to remove the spaces between the tag and the class/ID, so use "a.reply" and "input#inputField" (or just "#inputField"):

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

Answer 2

I'm kind of cheating here :)

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

Or:

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

In addition to what fudgey suggests, there are a few things I notice about your insertParamIntoField function:

// url: home.php?replyto=username, param: replyto, field: $("input .inputField")[0]
function insertParamIntoField(url, param, field) {  
   var anchor = document.createElement('a'), query; 
   // anchor is a link element and doesn't have a 'value' attribute
   anchor.value = url; 
   // It also won't have a 'query' attribute. This probably causes an error
   query = anchor.query.split('&'); 

   // As stated above there is no 'query' attribute to split on, but
   // also there are no &'s to split on in the url you pass in anyway.
   // At best, query will equal the full url...
   for(var i = 0, kv; i < query.length; i++) { 
      kv = query[i].split('=', 2); 
      // ...so splitting on = would get you 
      // query[0] = "home.php?replyto", query[1] = "username"
      // ... and "home.php?replyto" != "replyto", so...
      if (kv[0] == param) { 
         //... it never gets here. Also 'field' is a textarea, not an input
         // so it also doesn't have a 'value' attribute. try field.html(kv[1]) istead
         field.value = kv[1]; 
         return; 
      } 
   }   
} 

Try this:

function insertParamIntoField(url, param, field) {
   var qs = url.split("?");
   var query = qs[1].split("&");

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

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