We Keep Coding

Show input value in the closest div with jquery

I want to return the value of each input its closest div. Each div has the different name but same div class next to it. The problem is I cannot find the closest div class with jquery. But the value from typing keyup sent succesfully.
$('.bk_name').on('keyup', function() {
var q = $(this).val();
$(this).parent().closest('div.resp').html(q);
console.log(q);
}); //keyup
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-5">
<label>Name1</label>
<input type="text" class="bk_name" name="bk_name[1]" />
<div class="resp"></div>
</div>
<br />
<div class="col-sm-5">
<label>Name2</label>
<input type="text" class="bk_name" name="bk_name[2]" />
<div class="resp"></div>
</div>
For the fiddle here : https://jsfiddle.net/s85n42eo/1/

You can use $(this).next('div.resp').html(q) or $(this).parent().find('div.resp').html(q)
The problem is that you are using .closest() it will search for parents, not look for children.
Demo
$('.bk_name').on('keyup', function() {
var q = $(this).val();
console.log($(this).parent().find('')
$(this).next('div.resp').html(q);
console.log(q);
}); //keyup
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-5">
<label>Name1</label>
<input type="text" class="bk_name" name="bk_name[1]" />
<div class="resp"></div>
</div>
<br />
<div class="col-sm-5">
<label>Name2</label>
<input type="text" class="bk_name" name="bk_name[2]" />
<div class="resp"></div>
</div>

You should use
.find()
when yo want to search for a nested element.
since you bubble up 1 element using .parent() you get to the <div class="col-sm-5"> element. from there you are trying to reach a child element <div class="resp"> - you can do that with .find
.closest traverses up through its ancestors in the DOM tree while
.find does the opposite
$('.bk_name').on('keyup', function() {
var q = $(this).val();
$(this).parent().find('div.resp').html(q);
console.log(q);
}); //keyup
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-5">
<label>Name1</label>
<input type="text" class="bk_name" name="bk_name[1]" />
<div class="resp"></div>
</div>
<br />
<div class="col-sm-5">
<label>Name2</label>
<input type="text" class="bk_name" name="bk_name[2]" />
<div class="resp"></div>
</div>

copy value with select() and copy

I'm trying select a input and then copy the text into input, but has trouble identifying the children.
$(".input-group .copyLink").click(function() {
$(this).parent().find('.htmlLink').select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
Any suggestion?
Thanks!

You can shorten the code little bit since you have a div wrapper and only one sibling:
$(".input-group .copyLink").click(function() {
$(this).siblings().select();
document.execCommand("copy");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>

You need to bind event with your button, based on button event response, you need to find your input box using jquery DOM selector function like "prev". After this, execute your other task with input object.
Reference for jquery DOM Selector: jQuery: find input field closest to button
Your answer jsfiddle: https://jsfiddle.net/JackRyu/udk6za34/1/
You answer code
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<html>
<body>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>
<body>
<script>
$('.input-group button').on('click',function(){
console.log('active');
var input=$(this).prev('input');
$(input).select();
document.execCommand('copy');
});
</script>
</html>

show/hide a div based on click in another div

I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.

You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>

jQuery val() doesn't update value in .html()

I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').val("Young man");
content.find('#age').val("25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>
I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?

jQuery .val() method never updates the value attribute. You can change it with .attr() method.
$('#trigger').click(function() {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
alert(content.find('#name').val());
alert(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

Assign the new value using attr().
$('#trigger').click(function () {
var content = $(this).parent().find('.content');
content.find('#name').attr("value", "Young man");
content.find('#age').attr("value", "25");
console.log(content.find('#name').val());
console.log(content.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="trigger" href="#">Know!</a>
<div class="content">
<div>
<label>Name:</label>
<input type="text" id="name" value="dummy">
</div>
<div>
<label>Age:</label>
<input type="text" id="age" value="dummy">
</div>
</div>
</div>

Wrap a div into wrapper div

I have a div with some elements inside it. What I want is to create a wrapper div around that div using j query.
<div id="foo">
<input type="text">
<input type="button">
</div>
I need to make the above code look like the following
<div class="wrapper">
<div id="foo">
<input type="text">
<input type="button">
</div>
</div>

Just use Wrap method.
$( "#foo" ).wrap( "<div class='wrapper'></div>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<input type="text">
<input type="button">
</div>