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();
});
});
Related
I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.
This is the code:
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});
You can use on('blur') or .on('focusout')
//...
.on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
JSFiddle
You can use also on('keyup')
$(document.body).on("keyup", ".external-media-input", function(){
if($(this).val() == '')
$(this).remove();
});
here is your fiddle: https://jsfiddle.net/bembvptx/2/
In your style add one more event:
$(document.body).on("input", ".external-media-input", function () {
if (!$(this).val())
{
$(this).remove();
}
});
I appended an element:
$("#usernames_list").append("<li class='username_item'>" + item.username + "</li>")
Then I tried to select the newly appended element:
$(".username_item").bind('click', function(){
alert("asdas");
})
tried this also:
$(".username_item").click(function(){
alert("asdas);
})
alert function is not working.
How to fix this? All those other answers did not help
Your code should work as is but is not very effective.
Simplest and most effective way would be to keep reference of your created element so you won't have to research it again:
var $container = $("<li class='username_item'>" + item.username + "</li>");
$container.appendTo($("#usernames_list"));
this way you can register your listener easily :
$container.click(function(){
alert("asdas");
})
You can add it this way:
var $container = $("#usernames_list");
var liClick = function() {
alert("ok");
}
$container.on('click', '.username_item', liClick);
And here is example: http://fiddle.jshell.net/scg32rzh/3/
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;
});
});
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));
});
I have list of divs all with the same class, I want to apply a function to all of them which are not the clicked one (this), how can i select !this with jQuery?
UPDATE:
I've made this and it is not working, any ideas why?
$("li").each(function(){
$("li").not(this).click(function(e) {
$(this).hide();
});
});
UPDATE 2: this is the whole actual code:
$(".mark").click(function(e) {
e.preventDefault();
var id = "#" + $(this).parent().parent().parent().parent().attr("id") + " ";
var currentStatus = "deleted"; // to be replaced with actual status
var currentStatusClass = "." + currentStatus + "-heading";
$(id + currentStatusClass).show();
$(id + ".edit-headings").click(function(){
$(this).find(".headings-status").show().addClass("bg-hover");
$(id + ".headings-status").click(function() {
$(id + ".headings-status").not(this).hide();
});
});
});
Have a look at jQuerys not function: http://api.jquery.com/not/
$('div').not(this).doSomething();
Regarding your update, try:
$("li").click(function(e) {
$("li").not(this).hide();
});
Use the .not() function:
$('.yourclass').click(function() {
$('.yourclass').not(this).yourFunc();
});
use $('div').not(this) to select other than clicked one.
using :not() or .not()
$this;
function myFunction(){
// stuff here // and use $this for element reference
}
$('yourElement:not(.selected)').on('click',function(){
// (make sure to add '.selected' to the new one and toggle existant)
$('.selected').removeClass('selected');
$this = $(this);
$this.addClass('selected');
myFunction();
});
this is wrong:
var newStatus = $(this).className().replace("contribution-", "");
className is not a function.
Instead of above line you can try this:
var cls = $(this).attr('class').replace('contribution-','');
$(this).removeClass().addClass(cls);