{"id":257,"date":"2009-09-22T19:43:15","date_gmt":"2009-09-22T19:43:15","guid":{"rendered":"https:\/\/jassweb.com\/new22\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically\/"},"modified":"2009-09-22T19:43:15","modified_gmt":"2009-09-22T19:43:15","slug":"solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/","title":{"rendered":"[Solved] Change textbox value when click link in jquery div based dynamically"},"content":{"rendered":"<h2> Introduction <\/h2>\n<p>[ad_1]<\/p>\n<p>This article will provide a step-by-step guide on how to change the value of a textbox when a link is clicked in a jQuery div based dynamically. This is a useful technique for creating dynamic forms and can be used to create a variety of user interfaces. We will be using jQuery to achieve this effect and will be using a few simple lines of code to get the desired result.<\/p>\n<h2> Solution<\/h2>\n<p><\/p>\n<p>$(document).ready(function(){<br \/>\n    $(&#8216;a.link&#8217;).click(function(){<br \/>\n        var linkText = $(this).text();<br \/>\n        $(&#8216;#textbox&#8217;).val(linkText);<br \/>\n    });<br \/>\n}); <\/p>\n<p><\/p>\n<div class=\"entry-content\" itemprop=\"text\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><br \/>\n<script><\/p>\n<p><\/script><\/p>\n<p><\/p>\n<div id=\"answer-54965872\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"54965872\" data-parentid=\"54965626\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>If i understood correctly,<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>$(function(){\n$('.toggle_contact').click(function(){\n\n var contactNumber = $(this).data('number');\n $(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');\n $(this).parents().find('input:text').val(contactNumber);\n})\n})<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.selected{\n  background-color:red; \n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;div id=\"scroll\" style=\"overflow: auto;height:375px\"&gt;                                \n&lt;div class=\"row pt-5 pb-5 mb-5 this_contact\"&gt;\n&lt;div class=\"col-xs-3\"&gt;&lt;img src=\"https:\/\/img.icons8.com\/bubbles\/2x\/administrator-male.png\" height=\"40\"&gt;&lt;\/div&gt;\n&lt;div class=\"col-xs-9 no-col-r\"&gt;\n&lt;span class=\"f_17\"&gt;Shiv&lt;\/span&gt;\n&lt;a data-number=\"123456789\" class=\"toggle_contact\"&gt;&lt;img src=\"https:\/\/www.fast2sms.com\/panel\/img\/icons\/add1.png\" class=\"add-img\"&gt;&lt;\/a&gt;&lt;br&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;                         \n\n\n&lt;div class=\"row pt-5 pb-5 mb-5 this_contact\"&gt;                                        \n&lt;div class=\"col-xs-3\"&gt;&lt;img src=\"https:\/\/img.icons8.com\/bubbles\/2x\/administrator-male.png\" height=\"40\"&gt;&lt;\/div&gt;\n&lt;div class=\"col-xs-9 no-col-r\"&gt;\n&lt;span class=\"f_17\"&gt;Dummy&lt;\/span&gt;\n&lt;a data-number=\"1253648595\" class=\"toggle_contact\"&gt;&lt;img src=\"https:\/\/www.fast2sms.com\/panel\/img\/icons\/add1.png\" class=\"add-img\"&gt;&lt;\/a&gt;&lt;br&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;input type=\"text\" name=\"name\" value=\"\"&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p> <span class=\"d-none\" itemprop=\"commentCount\">8<\/span> <\/p>\n<\/div>\n<\/div>\n<p>solved Change textbox value when click link in jquery div based dynamically <\/p>\n<p><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><br \/>\n<script><\/p>\n<p><\/script><\/div>\n<p>[ad_2]<\/p>\n<p>If you are looking for a way to change the value of a textbox when you click a link in a jQuery div based dynamically, then you have come to the right place. In this article, we will discuss how to achieve this using jQuery. <\/p>\n<p>The first step is to create a div element with a link inside it. This link should have an id attribute so that it can be easily identified. The following code shows how to do this:<\/p>\n<pre><code>&lt;div id=\"myDiv\"&gt;\n  &lt;a href=\"#\" id=\"myLink\"&gt;Click Here&lt;\/a&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Next, we need to create a textbox element with an id attribute. This will be used to store the value that will be changed when the link is clicked. The following code shows how to do this:<\/p>\n<pre><code>&lt;input type=\"text\" id=\"myTextbox\" value=\"\" \/&gt;\n<\/code><\/pre>\n<p>Now, we need to add a jQuery event handler to the link. This event handler will be triggered when the link is clicked. The following code shows how to do this:<\/p>\n<pre><code>$(\"#myLink\").click(function(){\n  \/\/ code to change the value of the textbox\n});\n<\/code><\/pre>\n<p>Finally, we need to add the code to change the value of the textbox. This can be done using the jQuery val() method. The following code shows how to do this:<\/p>\n<pre><code>$(\"#myTextbox\").val(\"New Value\");\n<\/code><\/pre>\n<p>And that&#8217;s it! You have now successfully changed the value of a textbox when you click a link in a jQuery div based dynamically. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction [ad_1] This article will provide a step-by-step guide on how to change the value of a textbox when a link is clicked in a jQuery div based dynamically. This is a useful technique for creating dynamic forms and can be used to create a variety of user interfaces. We will be using jQuery to &#8230; <a title=\"[Solved] Change textbox value when click link in jquery div based dynamically\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\" aria-label=\"More on [Solved] Change textbox value when click link in jquery div based dynamically\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388],"class_list":["post-257","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb\" \/>\n<meta property=\"og:description\" content=\"Introduction [ad_1] This article will provide a step-by-step guide on how to change the value of a textbox when a link is clicked in a jQuery div based dynamically. This is a useful technique for creating dynamic forms and can be used to create a variety of user interfaces. We will be using jQuery to ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2009-09-22T19:43:15+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Change textbox value when click link in jquery div based dynamically\",\"datePublished\":\"2009-09-22T19:43:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\"},\"wordCount\":322,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\",\"name\":\"[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2009-09-22T19:43:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Change textbox value when click link in jquery div based dynamically\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb","og_description":"Introduction [ad_1] This article will provide a step-by-step guide on how to change the value of a textbox when a link is clicked in a jQuery div based dynamically. This is a useful technique for creating dynamic forms and can be used to create a variety of user interfaces. We will be using jQuery to ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/","og_site_name":"JassWeb","article_published_time":"2009-09-22T19:43:15+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Change textbox value when click link in jquery div based dynamically","datePublished":"2009-09-22T19:43:15+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/"},"wordCount":322,"commentCount":0,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/","url":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/","name":"[Solved] Change textbox value when click link in jquery div based dynamically - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2009-09-22T19:43:15+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-change-textbox-value-when-click-link-in-jquery-div-based-dynamically-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Change textbox value when click link in jquery div based dynamically"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/257\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}