use link to add content to input box - javascript

What is the simplest way to use a link to populate a input text box with the link content?
I have these links - quite few like these
P3030-6
P3030-6
this text box
<input type="text" name="code" value="" size="40" class="wpcf7-form-control wpcf7-text sidebarInput" id="code" aria-invalid="false">
When someone clicks on the link I want the P3030-6 etc to be added to the text box.
I have a great little script that uses jquery 1.7, but my site needed 1.10.2 - and adding the 1.7 scrip stopped some of the funcitonality of the site.
Any ideas on the best process greatly received!
Thanks

Well, you could add a class on the links
P3030-6
then something like
$('.forinput').click(function(e) {
e.preventDefault();
$('#code').val($(this).text());
});
see jsFiddle
EDIT
to add
$('.forinput').click(function(e) {
e.preventDefault();
var $code = $('code');
$code.val($code.val() + $(this).text());
});
see jsFiddle

You can do it may ways. it depends on your anchor tag position. you can get anchor tag by its parents elements. (e.g i have used a div with class content as parent).
Demo:
http://jsfiddle.net/a6NJk/597/
<div class="content">
P3030-61
P3030-62
<input type="text" name="code" value="" size="40" class="wpcf7-form-control wpcf7-text sidebarInput" id="code" aria-invalid="false">
</div>
Jquery:
$(".content a").click(function(e){
e.preventDefault();
$('#code').val($(this).text());
console.log("fddsf");
})
If you want to add all anchor clicked text:
Demo : http://jsfiddle.net/a6NJk/598/
then replace
$('#code').val($(this).text());
by
$('#code').val($('#code').val()+$(this).text());
if you don't want duplicate values :
demo: http://jsfiddle.net/a6NJk/600/
$(".content a").click(function(e){
e.preventDefault();
var out = $('#code').val();
if(out.indexOf($(this).text()) == -1) {
$('#code').val(out+$(this).text());
}
})
you can add , like this:
http://jsfiddle.net/a6NJk/607/
$(".content a").click(function(e){
e.preventDefault();
var out = $('#code').val();
if(out.indexOf($(this).text()) == -1) {
out = out == '' ? out: out+',';
$('#code').val(out+$(this).text());
}
})

href="" onclick="document.getElementById('code').value=this.innerHTML;return false;"
That should be in each link. Or you can do it systemically through Javascript but someone did that already so I'm gonna be different and lame.
onclick="var code = document.getElementById('code');code.value=(code.value.indexOf(this.innerHTML) < 0) ? code.value + ', ' + this.innerHTML : code.value;return false;"

Related

Remove element from outside its container

I am trying to create an election simulator. I have a form field and a link to add more fields. Whatever I write in the fields shows up below the fields. When I click on "Remove" it removes the form field but not it's corresponding text below. This is what I want to fix.
html
<h2>Add new party</h2>
<div id="partiesDiv">
<p>
<label for="parties"><input type="text" id="party" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt('party','txt');"></label>
</p>
</div>
<div id="text">
<p>
<span id="txt"></span>
</p>
</div>
javascript
$(function() {
var partyDiv = $('#partiesDiv');
var textDiv = $('#text');
var i = $('#partiesDiv p').size() + 1;
$('#addParty').live('click', function() {
$('<p><label for="parties"><input type="text" id="party_' + i +'" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label> Remove</p>').appendTo(partyDiv);
$('<p><span id="txt' + i +'"></span></p>').appendTo(textDiv);
i++;
return false;
});
$('#remParty').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function updateTxt(field,toField){
var field = document.getElementById(field);
var toField = document.getElementById(toField);
toField.innerHTML=field.value;
}
When I've added a few fields the html looks like this:
<div id="partiesDiv">
<p>
<label for="parties"><input type="text" id="party" size="20" name="party"
value="" placeholder="Party name" onkeyup="updateTxt('party','txt');">
</label>
</p>
<p>
<label for="parties"><input type="text" id="party_2" size="20" name="party"
value="" placeholder="Party name" onkeyup="updateTxt('party','txt');">
</label> Remove <--- WHEN I CLICK HERE
</p>
</div>
<div id="text">
<p>
<span id="txt"></span>
</p>
<p>
<span id="txt2"></span>
</p> <--- I WANT THIS <p> TO BE REMOVED
</div>
What I'm guessing is that I should add a line below $(this).parents('p').remove(); that removes the p within div id="text". The problem is that I don't know how to make it know which p to remove.
I'm new to JavaScript and this might be over my head, so please let me know if I should clarify anything!
Thanks
You can remove the closest element to the parent element of your field by using this code:
$(this).parent.closest('p').remove();
Here is more you can read about 'closest' method http://api.jquery.com/closest/
My not so pretty solution:
$('#addParty').live('click', function() {
$('<p><label for="party"><input type="text" id="party_' + i +'" size="20"
name="party" value="" placeholder="Skriv partinamn"
onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label>
<a href="#" *****class="remParty' + i +'"*****>Remove</a></p>')
.appendTo(partyDiv);
$('<p><span id="txt' + i +'"></span></p>').appendTo(textDiv);
i++;
return false;
});
So that the class="remParty" gets i appended to it for every new field that is created.
Then I just add
$('.remParty2').live('click', function() { $(this).parents('p').remove();
$("p:has(#txt2)").remove(); if(i==2){i--;} return false; });
as many times as I want the maximum number of parties allowed to be.
Dude, you have to update your jquery methods.
The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
Use .closest() to call the closest parent, as the <p> tag you want.
Remember to use a class '.remParty' instead of an id '#remParty', because if you have more than one element with the same id it will not work.
Demo:
http://jsfiddle.net/EhjM7/
I rewrited it for you:
$(function() {
var i = $('#partiesDiv p').length + 1;
$(document).on('click','#addParty',function(e) {
e.preventDefault();
$('#partiesDiv').append('<p><label for="parties"><input type="text" id="party_' + i +'" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label> Remove</p>');
$('#text').append('<p><span id="txt' + i +'"></span></p>');
i++;
return false;
});
$(document).on('click','.remParty',function(){
$(this).closest('p').remove();
i--;
return false;
});
});
function updateTxt(field,toField){
var field = document.getElementById(field);
var toField = document.getElementById(toField);
toField.innerHTML=field.value;
}
First of all, you should NOT use the id attribute when you are using it more than once. there may be only one id with the same value within the page!
if you want to remove an upper element selecting it by its child you can use the :has() selector.
$("p:has(#txt2)").remove();
So lets begin again :)
$('#addParty').live('click', function() {
$('<p>Remove</p>').appendTo(partyDiv);
$('<p><span data-party-id="'+i+'"></span></p>').appendTo(textDiv);
});
I do assing data-party-id to both elements, as we can later easily refer to them.
Now lets do the magic to remove it.
$('.remParty').live('click', function() {
// learn something about data attributes and data()
var partyId = $(this).data("party-id");
$('p:has([data-party-id="' + partyId + '"])').remove();
});
But it would be much easier, if you would assign the identification to the p and not to the span. Then you do not need the :has() selector

Bootstrap Password input Toggle Function not Working

Here is my HTML Form :-
<input name="inputPassword" type="password" id="inputPassword" placeholder="Password.."><span class="add-on"><i class="icon-eye-open"></i></span>
And here is my try with Jquery [I am not Jquery Student :(]
<script type="text/javascript">
$(".icon-eye-open").click(function(){
$('.icon-eye-open').removeClass('icon-eye-open').addClass('icon-eye-close');
document.getElementById("inputPassword").setAttribute('type', 'text');
});
$(".icon-eye-close").click(function(){
$('.icon-eye-close').removeClass('icon-eye-close').addClass('icon-eye-open');
document.getElementById("inputPassword").setAttribute('type', 'password');
});
</script>
So, you might have guessed, what i am trying to do. I am actually trying to replace class of clicked class [toggle-ing between class] and than trying to change attribute from password to text and vice versa.
And this is not Working.
Here is jsfiddle demo :- http://jsfiddle.net/gR5FH/
Can you please suggest / help me find my mistake.
Thanks
Try this
$(".icon-eye-open").on("click", function() {
$(this).toggleClass("icon-eye-close");
var type = $("#inputPassword").attr("type");
if (type == "text")
{ $("#inputPassword").attr("type", "password");}
else
{ $("#inputPassword").attr("type", "text"); }
});
Your problem is that the element $(".icon-eye-close") does not exist when you start listening the click event, so that code never runs. You can prevent this by using an unique event handler for the click and then toggle classes and input type within it.
Try this HTML:
<input name="inputPassword" type="password" id="inputPassword" placeholder="Password...">
<span class="add-on">
<i id="visibilitySwitch" class="icon-eye-close"></i>
</span>
With this JS:
$("#visibilitySwitch").click(function(){
$(this)
.toggleClass('icon-eye-open')
.toggleClass('icon-eye-close');
if ($('#inputPassword').attr('type') == 'password')
$('#inputPassword').attr('type', 'text')
else
$('#inputPassword').attr('type', 'password')
});

Change span when text field changes

I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:
Any ideas?
You can use keyup and then replace the span content with the textbox value.
<input id="test" type="text" />
<span id="content"></span>
$("#test").keyup(function() {
$("#content").html($("#test").val());
});
http://jsfiddle.net/
Edit:
You can also use $(this).val() as pXL has suggested.
$("#test").keyup(function() {
var val = $(this).val();
$("#content").html(val);
});
You can simply use jquery for this. For eg
<input type="text" id="mytext"/>
<span id="content"></span>
$(document).ready(function(){
$("#mytext").keyup(function(){
$('#content').html($(this).val());
})
})
I would use $.keyup() and update the html with input value.
Demo: Working Demo
$(document).ready(function()
{
// Regular typing updates.
$("#input").keyup(function()
{
$("#output").html($(this).val());
});
// If pasted with mouse, when blur triggers, update.
$("#input").change(function()
{
$(this).keyup();
});
// Any value loaded with the page.
$("#input").keyup();
});
The lost focus is also an aproach,
html:
<input type="text" id="txa" value="123" />
<span>345</span>
jquery:
$('input[id=txa]').blur(function () {
$(this).next("span").text($(this).val());
});
Glad to help.

jQuery fadeout element on hover

i have a wordpress site that when a form is filled out, if an error is thrown then the plugin shows a <span> with the error text within.
Im trying to fade that text out using jQuery and I have tried both the following to no avail...
$(".wpcf7-not-valid-tip").on("mouseenter", function(){
alert( 'test');
});
$('.wpcf7-not-valid-tip').hover(
function () {
$(this).fadeOut();
});
My HTML markup is being outputted as so...
<span class="wpcf7-form-control-wrap telno">
<input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required field wpcf7-not-valid" value="" name="telno">
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
</span>
Is it possible you are binding the events before the item exists?
try this and see if you have more luck
$('.wpcf7-not-valid-tip').live('mouseenter', function(ev) {
$(this).fadeOut();
});
or
$(".wpcf7-not-valid-tip").on("mouseenter", function(ev){
$(this).fadeOut();
});

How do I remove the default Google Search Value from Google Search box?

I am trying to use a little jQuery to "hide" the initial value in a Google Search box when you click in the box and I am missing something.
Here is the search box code:
<div id="search_box">
<form action="http://mfrp.ehclients.com/search_results" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="017425724926122041548:1ccj3d-e1-s" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" id="q" name="q" value="Search..." size="31" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
Here is the jQuery:
<script type="text/javascript">
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
</script>
Only problem is, it doesn't work. Here is the page.
I would appreciate some help sorting this out.
Thanks,
Forrest
When your code it needs to run when the DOM elements available to find, so $("#q") finds the id="q" elements to bind to. This means your script either needs to run after the elements it needs in the page (e.g. end of the <body>), or when the DOM is completely ready, like this:
$(function() {
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
});
If you're not doing this, and the $("#q") selector doesn't find any elements...there's just nothing to run .click() on, which binds that handler.
I think what you'll want is the reverse as well, which would look like this:
$(function() {
$('#q').focus(function() {
if($(this).val() == 'Search...') $(this).val('');
}).blur(function() {
if($(this).val() == '') $(this).val('Search...');
});
});
This will put "Search..." back in the box if it's empty and someone clicks outside, by relying on .focus() and .blur() instead of .click().
demo
You've been faked by google... the textbox has a background which look as if there was value... you should have checked that on the dev tools..
so just try to remove it on blur...
$('#q').blur(function(){
$(this).css('background','none');
if(this.value == '') {
this.value = this.defaultValue;
}
}).focus(function() {
if(this.value == this.defaultValue) {
this.value = '';
}
});​

Categories

Resources