Javascript to Jquery, add text in input onclick

2024/2/27 8:45:01

How can I change this javascript code to JQuery.

<script type="text/javascript">function addTextTag(text){document.getElementById('text_tag_input').value += text;}        

When a user click the link text automaticaly is added in input.

This is the HTML:

<input id="text_tag_input" type="text" name="tags" /><div class="tags_select"><a href="#" onClick="addTextTag('text1, '); return false">text1</a><a href="#" onClick="addTextTag('text2, '); return false">text2</a><a href="#" onClick="addTextTag('text3, '); return false">text3</a>

Here is the demo:

<script type="text/javascript">$(function() {$('.tags_select a').click(function() {var value = $(this).text();var input = $('#text_tag_input');input.val(input.val() + value + ', ');return false;});});

and your markup:

<input id="text_tag_input" type="text" name="tags" /><div class="tags_select"><a href="#">text1</a><a href="#">text2</a><a href="#">text3</a>

and here's a live demo.

Related Q&A

Node module.exports returns undefined

I am having an issue with Node.js and module.exports. I understand that module.exports is a call to return an object, that object having whatever properties it is assigned.If I have a file structure li…

Greasemonkey script to reload the page every minute

How to reload a page every 60 seconds?My attempt: setTimeout (location.reload, 1 * 60 * 60);Im not sure what those numbers mean, or how to adapt them to reload after 60 seconds only.

In a While loop setTimeout not working

I am 11 and just started programming. I was trying to use a while loop and I want it to display the answers in blocks instead of one huge chunk. So i tried to use a setTimeout but it would just display…

Pass a message from Chrome Extension to Webpage

I need to pass a message (raise an event) in a Chrome extension, and have JavaScript on a web page react to it.In content_script.js of the extension, there should be a function likeraiseXYZevent(data);…

Conflict between jquery and bootstrap

I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs …

Undefined index: Error in ajax POST and/or php script?

Im trying to send an ajax POST to a php file, however the php file sends a notice of "undefined index", and the php file never seems to receive the value im trying to send it. Ive been search…

How does webkit/chromes WebInspector Resources Inspection work?

I always want to know how the resource inspection work in webkit/safari/chromes WebInspector work.The browser must provide a native BPI or something for javascript to display list of queries and their …

Good examples for using a Closure in Javascript

Well, I recently learned about closures in Javascript.While i find its concept truly amazing, i have yet to find a good application for them, myself.In all the blog posts, all the tuturials i found, i …

Remove Individual Files When Multiple FIles Are Selected With File Input

Is it possible to remove individual files from the list of files to be uploaded when the user is allowed to select multiple files? For example, I have an input that looks somewhat like that:<input …

JavaScript: execute async function one by one

I have a simple "async" JS function:function asyncFunc(i) {setTimeout(function () {console.log(i);}, 1000); }if I want to execute this asyncFunc 5 times in a for loop, i.e. log 1 - 5 per seco…