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>

How to use selector to get value under DOM using Jquery

I have a html container structure like as
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1'>
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
<input name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='3'>
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
<input name='SubInput' value='6'>
</div>
</div>
and I using Jquery to do foreach and get data
$('.APart input[name=MainInput]').each(function(index, element) {
console.log(this.value)
});
now I know how to get MainInput value,next step how to get SubInput value?
this is my expectation result
array[0] = "1,2,5"
array[1] = "3,4,6"

Add a new class tag on your input dom
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='1'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='2'>
<input class=''SubClass' name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='3'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='4'>
<input class=''SubClass' name='SubInput' value='6'>
</div>
</div>
so next step we can selector class like as
$('.APart').each(function(index, element) {
$(this).children('.Main').find('.MainClass').each(function (i,e){
console.log($(e).val())
});
$(this).children('.Sub').find('.SubClass').each(function (i,e){
console.log($(e).val())
});
});
This code to do things
get every APart Class
get APart DOM Data after to find next children class
then we find it after just need use selector to find new class group

I think you meant MainInput? You can select inputs via there name attribute, then get their value using the following:
$('.APart input[name=MainInput]').each(function(index, element) {
console.log($(element).val());
});
Have a look at this CSS Selectors cheat sheet for more.

first give a class name for what your are accessing input
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
</div>
<div class='Main'>
<input name='MainInput' value='3' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
</div>
</div>
after you can access with Jquery
$(':input.getMain').each(function(index, element){
var name = element.name;
});
reference
//this will give all your vaues

U can use the each function for looping
$('.APart input[name="MainInput"]').each(function(){
console.log($(this).val());
});

how to get child of div element

<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>
How to get values of all of inputs in div and how to check in which div input in(col1 or col2);
in my case div with class "row" will be added via firebase database.
const inputs = document.querySelectorAll(".div > .col");
alert(inputs.value);

Using JavaScript, try looping with forEach
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
Snippet:
var inputElem = document.querySelectorAll(".row input");
inputElem.forEach(function(obj){
console.log(obj.value)
})
<div class="div" id="div">
<div class="row">
<div class="col1">
<input type="text" value="one">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="two">
<!--I need to get a value of these inputs-->
</div>
</div>
<div class="row">
<div class="col1">
<input type="text" value="three">
<!--I need to get a value of these inputs-->
</div>
<div class="col2">
<input type="text" value="four">
<!--I need to get a value of these inputs-->
</div>
</div>
</div>

I think this could work:
$("div input").each(function(){
// Get the value:
console.log($(this).val());
// check in which div input in(col1 or col2)
console.log($(this).closest("div").attr("class"));
});

Try this:
const inputs = document.getElementById('div').getElementsByTagName('input');
console.log(inputs[0].value, inputs[1].value);
See an example here: https://jsfiddle.net/xbdd6q13/

Sum of two variables from div

I want to sum the two field automatically using javascript ,
After searching more about what I want exactly I found this example on table please how can I change it to work on divs
http://jsfiddle.net/gXdwb/3/
Those are my fields
<div> class="form-group">
<label for="nbStudentA" >Number student A</label>
<div>
{{ form_widget(form.nbStudentA, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for=" nbStudentB " >Number Student B</label>
<div class="col-sm-9">
{{ form_widget(form.nbStudentB, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for="Sum" >Sum Students :</label>
<div>
<input type="text" class="Sum" name="total" value=""/>
</div>
</div>
update:
what I have tried before is to sum the two variables using twig but it's done on the server side and what I want is the effectuate the sum just when the user enter the variables:
<div >
<label>Sum </label>
<div >
{% set foo = form.nbStudentA + form.nbStudentB %}
{{ foo }}
</div>
</div>

Don't know exactly what you want but this does work.If you want from only div
<div id="std-1">1</div>
<div id="std-2">2</div>
<div>{{one + two}}</div>
</div>
//scripts
$scope.one=parseInt(document.getElementById('std-1').innerHTML);
$scope.two=parseInt(document.getElementById('std-2').innerHTML);
or you don't mind input fields and making it dynamic
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="std-1">
Student one: <input ng-model="student.one " type="number"/>
</div>
<div class="std-2">
Student two: <input ng-model="student.two " type="number"/>
</div>
<div>Sum: {{student.one + student.two}}</div>
</div>

Make it simple
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app>
<div id="first">
<input ng-model="first" placeholder="First number" type="text" />
</div>
<div id="second">
<input ng-model="second" placeholder="Second number" type="text" />
</div>
<h1> Sum: {{first--second}} </h1>
</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>