Question

I am trying to append to a link with id a value that is entered from the input text field. I came this far searching stackoverflow but id doesn’t work!

<script type="text/javascript">
 jQuery(function(){
   $("#txt_name").keypress(function() {
     var value = $("#txt_name").val();
     });
   $("a#coupon_link").attr("href", function(i) {
      return href + '&discount_code='.text(value); 
      });
});
</script>

and this is how the html looks like

<form>
  <fieldset>
    <input id="txt_name" type="text" value="discount" />
  </fieldset>
</form>
<a id="coupon_link" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=XXXXXX&cl=YYYYYY&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>

Answer 1

Fix your code like this :

$(function(){
   $("#txt_name").keypress(function() {
     var value = $("#txt_name").val();
     var link = $("#coupon_link");
     var originalHref = link.attr('originalHref');
     if (!originalHref) {
          originalHref = link.attr("href");
          link.attr("originalHref", originalHref)
     }
     link.attr("href", originalHref + '&discount_code='+value);
   });
});

A few things to note :

• never add anything to a selector when you’re targeting an element by ID
• your value variable wasn’t in the same scope
• the return of val can be directly concatenated, you don’t need to try to change it to text
• you don’t need to pass a function to attr in your case
• you’re trying to make the href grow with every key stroke. This is a bad idea. The solution I propose is to keep the original href
• if you’re not sure the original href has yet some parameters (i.e. has ‘?’) you should test it (I let you do that)

Overall a much cleaner solution wouldn’t be to change the link but to build the href on click on the link :

$("#coupon_link").click(function(e) {
   location = this.href + '&discount_code=' + $('#txt_name').val();
});