[Solved] Change textbox value when click link in jquery div based dynamically

Introduction

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.

Solution

$(document).ready(function(){
$(‘a.link’).click(function(){
var linkText = $(this).text();
$(‘#textbox’).val(linkText);
});
});

$(function(){
$('.toggle_contact').click(function(){

 var contactNumber = $(this).data('number');
 $(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');
 $(this).parents().find('input:text').val(contactNumber);
})
})

.selected{
  background-color:red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" style="overflow: auto;height:375px">                                
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>                         


<div class="row pt-5 pb-5 mb-5 this_contact">                                        
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>

<input type="text" name="name" value="">

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.

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:

<div id="myDiv">
  <a href="#" id="myLink">Click Here</a>
</div>

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:

<input type="text" id="myTextbox" value="" />

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:

$("#myLink").click(function(){
  // code to change the value of the textbox
});

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:

$("#myTextbox").val("New Value");

And that’s it! You have now successfully changed the value of a textbox when you click a link in a jQuery div based dynamically.