Develop Reference

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

Why isn't this working If I add spaces to it?

So I'm making a theme for a blogging platform and I have only template editing access to it(means I cannot control the content coming from the server).I want to remove duplicate I want to remove duplicate images from the blog post page.Here is the code
it is working fine if the alt tag has no spaces
<p>Alt with Spaces.Works fine!</p>
http://jsfiddle.net/mixin/mB7mz/2/
Doens't work if the alt contains spaces
http://jsfiddle.net/mixin/G27fk/
What's the problem here?

chnage single quote of alt property to double
try following
function postHeaderImage(){
headerImage = $('#post-header img').attr('alt');
$('#post-content img').each(function() {
postContentImage = $(this).attr('alt');
if(postContentImage == headerImage){
$("#post-content img[alt='"+ postContentImage+"']").remove();
}
});
}

Your selector points to a different id.
http://jsfiddle.net/G27fk/4/
Try this one:
$('#post-content img').each(function() {

The problem was the way you removed the duplicate images, there is a more elegant way to do so. I updated your JSFiddle to a working example: http://jsfiddle.net/mB7mz/3/
$(document).ready(function(){
function postHeaderImage(){
headerImage = $('#post-header img').attr('alt');
$('#post-content img').each(function() {
postContentImage = $(this).attr('alt');
if(postContentImage == headerImage){
$(this).remove();
}
});
}
postHeaderImage();
});

There are 2 problems.
One the id used in the second code is mismatched
Attribute selector is case sensitive alt & Alt in the value
So
$(document).ready(function () {
function postHeaderImage() {
var headerImage = $('#header-image img').attr('alt');
$('#post-content img[alt="' + headerImage + '"]').remove();
}
postHeaderImage();
});
Demo: Fiddle
If you want case insensitive search then
$(document).ready(function () {
function postHeaderImage() {
var headerImage = $('#header-image img').attr('alt').toLowerCase();
$('#post-content img[alt]').filter(function () {
return $(this).attr('alt').toLowerCase() == headerImage;
}).remove();
}
postHeaderImage();
});
Demo: Fiddle

jQuery Toggle not working using this.name

I've created a contact form with validation and was trying to bolt on a help function whereby someone clicks on the question mark and a div with the explanation pops up.
I found a way to do it using a variable and "this" selector which seemed to work fine but it's stopped working and I can't seem to prevent the default # behaviour.
Having looked at similar questions, nothing has indicated what the problem might be. Here is the function:
$(function() {
//show/hide
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= this.name;
$("#"+divname).toggle();
return false;
});
});
jsFiddle link:http://jsfiddle.net/dvmac/dpVzL/2/

The # selector selects based off of id. If you want to select off of name, you need the attribute slector: '[name="' + divname + '"]'
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= this.name;
$('[name="' + divname + '"]').toggle();
return false;
});
An even better way is to just to do this: $(this)
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
$(this).toggle();
return false;
});
And if you have dynamically created elements, then you may want to try this:
$(document).on('click', 'a.form-question-help-link', function(e) {
$(this).toggle();
e.preventDefault();
});

use $(this).attr('name') or $(this).prop('name').
Check this fiddle.

should be $(this) instead of this
$(function() {
//show/hide
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= $(this).name;
$("#"+divname).toggle();
return false;
});
});

How can I update a input using a div click event

I've got the following code in my web page, where I need to click on the input field and add values using the number pad provided! I use a script to clear the default values from the input when the focus comes to it, but I'm unable to add the values by clicking on the number pad since when I click on an element the focus comes from the input to the clicked number element. How can I resolve this issue. I tried the following code, but it doesn't show the number in the input.
var lastFocus;
$("#test").click(function(e) {
// do whatever you want here
e.preventDefault();
e.stopPropagation();
$("#results").append(e.html());
if (lastFocus) {
$("#results").append("setting focus back<br>");
setTimeout(function() {lastFocus.focus()}, 1);
}
return(false);
});
$("textarea").blur(function() {
lastFocus = this;
$("#results").append("textarea lost focus<br>");
});
Thank you.

The first thing I notice is your selector for the number buttons is wrong
$('num-button').click(function(e){
Your buttons have a class of num-button so you need a dot before the class name in the selector:
$('.num-button').click(function(e){
Secondly, your fiddle was never setting lastFocus so be sure to add this:
$('input').focus(function() {
lastFocus = this;
...
Thirdly, you add/remove the watermark when entering the field, but ot when trying to add numbers to it (that would result in "Watermark-text123" if you clicked 1, then 2 then 3).
So, encalpsulate your functionality in a function:
function addOrRemoveWatermark(elem)
{
if($(elem).val() == $(elem).data('default_val') || !$(elem).data('default_val')) {
$(elem).data('default_val', $(elem).val());
$(elem).val('');
}
}
And call that both when entering the cell, and when clicking the numbers:
$('input').focus(function() {
lastFocus = this;
addOrRemoveWatermark(this);
});
and:
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
You'll see another change above - you dont want to use append when appends an element, you want to just concatenate the string with the value of the button clicked.
Here's a working branch of your code: http://jsfiddle.net/Zrhze/

This should work:
var default_val = '';
$('input').focus(function() {
lastFocus = $(this);
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
var text = $(e.target).text();
if (!isNaN(parseInt(text))) {
lastFocus.val(lastFocus.val() + text);
}
});
Live demo

Add the following function:
$('.num-button').live( 'click', 'span', function() {
$currObj.focus();
$currObj.val( $currObj.val() + $(this).text().trim() );
});
Also, add the following variable to global scope:
$currObj = '';
Here is the working link: http://jsfiddle.net/pN3eT/7/
EDIT
Based on comment, you wouldn't be needing the var lastFocus and subsequent code.
The updated fiddle lies here http://jsfiddle.net/pN3eT/28/

Dynamic form - DOM manipulation

I have a form where new input fields can be added via an add link. Each newly added input field can also be removed via a remove link.
What can I do so that the add and remove link is only shown for the input field that was added last?
Example: jsfiddle - my code
$(function() {
$('a.add_input').live('click', function(event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
var newDiv = $($class).find('div:first').clone();
//alert(newDiv)
newDiv.append('remove')
newDiv.find('input').each(function() {
$(this).val('');
});
$($class + ':first div:last').before(newDiv);
$(this).prev('a.add_input').remove();
alert(ok)
});
$('a.remove_input').live('click', function(event) {
event.preventDefault();
$(this).closest('div').remove();
});
});

Remove all but the last .add_input from the collection:
$(this).closest('.find_input').find('.add_input:not(:last)').remove();