Develop Reference

Jquery replace link with new value

I am reading data from a database and adding each link in a new table row.
I wrote a jquery function to replace the href of the link with a new value, but it is not working.
Also I have to mention that each time a new link is added to the table, I want the replacement to be done instantly, without click event or something.
$(document).ready(function() {
$("a").show(function() {
var before = $(this).href;
var replacewith = "https://www.google.com"
var after = before.replace(before, replacewith);
$(this).attr("href", after);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
Link1
</td>
</tr>

Your code has unnecessary lines. However fix is done
$(document).ready(function () {
$("a").show(function () {
var before = $(this).attr('href');
var replacewith = "https://www.google.com";
var after = before.replace(before, replacewith);
$(this).attr("href", after);
});
});

[edited: removed original comment for clarity]
See the second comment for answer.

Keep appending link value to an input box

I'd like to know how to append link values to an input box. But I can't figure out how to append a new link value to the old one, separated by a space [Fiddle].
<input id="a_input_id" type="text">
<a href="" class="special_field_link">#ABC<a>
<a href="" class="special_field_link">#DEF<a>
<script>
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($(this).html() + '');
return false;
});
});
Should I use something like:
var cur_val = $('#a_input_id').val($(this).html() + '');
if(cur_val)
$('#a_input_id').val(cur_val + "," + new_val);
else
$('#a_input_id').val(new_val);
Your help would be appreciate.

You can use like this,
$('.special_field_link').click(function (e) {
e.preventDefault();
$('#a_input_id').val($('#a_input_id').val()+" "+$(this).html());
});
Use event.preventDefault() to prevent the default click event of anchor. In each click you need to get the current input value, if you want to retain those. In your code, it was overwriting the old with the new values.
Fiddle

If you want to append the value, you could do:
var input = $('#a_input_id');
input.val(input.val() + $(this).html());
And note .live is deprecated, you'd better use .on instead if you switch to a new version of jQuery.
THE DEMO.

You could go with:
http://fiddle.jshell.net/s8nUh/149/
$(function()
{
$('.special_field_link').live('click', function()
{
var original = $('#a_input_id').val();
var val = original + ',' + $(this).html();
val = val.replace(/(^,)|(,$)/g, "");
$('#a_input_id').val(val);
return false;
});
});

$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($('#a_input_id').val() + $(this).html() + '');
return false;
});
});
To use best practices, its better to cache jquery object for anchor and also avoid using return false.
$(function(){
var txt$ = $('#a_input_id');
$('.special_field_link').live('click', function()
{
txt$.val(txt$.val() + $(this).html());
event.preventDefault();
});
});

jquery tabs have to click twice to show div

I have this jquery code:
$(document).ready(function() {
$(".tabLink").each(function(){
if(location.hash) {
$(".tabLink").removeClass("activeLink");
$(location.hash+"-1").addClass("activeLink");
$(".tabcontent").addClass("hide")
$(location.hash+"-1").removeClass("hide")
} else {
$(".tablink").click(function(){
$(".tabLink").removeClass("activeLink");
$(this).addClass("activeLink");
$(".tabcontent").addClass("hide")
$(location.hash+"-1").removeClass("hide")
});
}
});
});
to switch between tabs, my html is:
Company
Contacts
<div class="tabcontent" id="companyinfo-1">
</div>
<div class="tabcontent" id="contacts-1">
</div>
when i choose another tab i have to click it twice to make the div show
here is a fiddle with the full code : http://jsfiddle.net/2SRZE/

FIDDLE
Why not keep it simple and grab the target right off the anchor link instead of the page URL?
<div class="tab-box">
Company
Contacts
</div>
<div class="tabcontent" id="companyinfo-1">
Tab 1 Content
</div>
<div class="tabcontent hide" id="contacts-1">
Tab 2 Content
</div>
$(document).ready(function() {
if(location.hash) {
// maybe do a little more validation here
setActiveLink(location.hash);
}
$('.tabLink').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
document.location.hash = target;
setActiveLink(target);
});
function setActiveLink(target) {
$(".tabLink").removeClass("activeLink");
$('a[href=' + target + ']').addClass("activeLink");
$('.tabcontent').addClass('hide');
$(target).removeClass('hide');
}
});

A comment on why you have to click twice:
When you click the tab and the event is triggered the address of the window still has not changed. On first click that would mean no hash. On subsequent clicks that would mean the hash has the value of previous clicked anchor.
Page enter: hash == ''
Click on Contacts: hash == ''
Hide content. (Company is being hided.)
Show hash + '-1' (no match as hash is empty.)
Event done, window hash changes: hash == '#contacts'
Click on #contacts: hash == '#contacts'
Hide content. (Nothing to hide).
Show hash + '-1': contacts-1 show.
Easier by example. Here the text-box is updated with hash value on each click.
Fiddle
As you can see, the hash changes too late.
So: As noted by Lucky Soni, check the target event's href value.

http://jsfiddle.net/awesome/svP3T/2/
$(document).ready(function () {
$(".tabcontent").addClass("hide");
$($(".activeLink").attr('href') + '-1').removeClass("hide");
$(".tabLink").each(function () {
var _tabLink = $(this);
var _tabLinkAttr = $(_tabLink.attr('href') + '-1');
_tabLink.click(function () {
$(".tabLink").removeClass("activeLink");
_tabLink.addClass("activeLink");
$(".tabcontent").addClass("hide");
_tabLinkAttr.removeClass("hide");
});
});
});

check this out: http://jsfiddle.net/awesome/svP3T/4/
see this too: $(window) bind hashchange how to check part hash changed?
var originalHash = window.location.hash;
$(document).ready(function () {
$(window).bind('hashchange', function () {
// remove all active
$(".tabLink").removeClass("activeLink");
$(".tabcontent").addClass("hide");
// https://stackoverflow.com/questions/7699073/window-bind-hashchange-how-to-check-part-hash-changed
var newHash = window.location.hash;
var _origHash = originalHash;
originalHash = newHash;
// log
console.log('original: ' + _origHash);
console.log('new: ' + newHash);
// update active
$('[href="' + newHash + '"]').addClass("activeLink");
$(newHash + '-1').removeClass("hide");
});
// init
$(".tabcontent").addClass("hide");
$($(".activeLink").attr('href') + '-1').removeClass("hide");
});

Append to a.href id from input field

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>

You probably meant this:
$(function() {
$("#coupon_link").on('click', function(e) {
e.preventDefault(); // apparently not needed
location.href = $(this).attr('href') + '&discount_code=' + encodeURIComponent($('#txt_name').val());
});
});
You don't have to update the value of #txt_name on keypress; you only have to use the value when the link is pressed.

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

Not sure to understand, but it looks like a scope issue try this javascript :
<script type="text/javascript">
jQuery(function(){
var value = 0;
$("#txt_name").keypress(function() {
value = $("#txt_name").val();
$("a#coupon_link").attr("href", function(i) {
return href + '&discount_code=' + encodeURIComponent(value);
});
});
});
</script>

Try this:
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href", '&discount_code=' + String(value));
});
});

This isnt working because the href isnt being changed as the function is called before a keypress event is triggered. Look into replacing keypress with blur and update the href when blur() is called

i think you need this:
<script type="text/javascript">
$(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href",href+'&discount_code='+value.toString);
});
});
</script>
look at href don't know where you have that var, if it is needed ok else remove that

You probably need to change the href when a key has been pressed, not only on page load. To do so you will have to do the replacing of the href inside the keyup function, like so:
$(function(){
var link = $("a#coupon_link");
link.data('href', link.attr("href"));
$("#txt_name").on('keyup', function() {
link.attr("href", link.data('href') + '&discount_code='+ this.value);
});
});
So as to not append the &discount_code=*** several times, you need to store the original href somewhere, like in a data attribute.

this one worked for me getting value from input field and append it to the existing link using jquery.
$('#qty').on('keyup', function() {
var theQty = 0;
theQty = $("#qty").val();
var oldHref=$("a#buybtn").attr("href");
$("a#buybtn").attr("href",oldHref+ '&qty=' + String(theQty));
});

Get HREF property

<a class="some" id="1" href="/s/1/2">link 1</a>
<a class="some" id="2" href="/s/2/3">link 1</a>
<script>
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = $(this).css('href');
alert(id);
alert(link);
return false;
});
});
</script>
When I click on the link I get correct id, but "undefined" link. What is the problem and how can I fix it?

Change
var link = $(this).css('href');
to
var link = $(this).attr('href');
.css() is used to get/set CSS properties, .attr() is used to get/set attributes on elements.

You need to access the elements attribute, not CSS property :-)
var link = $(this).attr('href');

Use attr():
var link = $(this).attr('href');
Or simply:
var link = this.href;
Your code should look like:
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = this.href;
alert(id);
alert(link);
return false;
});
});