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>
Related
On clicking the button I want to get the closest <input name="something/> value.
I tried $(this).closest(".input").val() but didn't work.
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something/></div>
<div class="third-div"></div>`
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>
I would traverse up to the containing div first, then back down to the desired control.
$(this).closest(".main-div").find(".input");
EDIT
I just read your comment saying you want to get the last instance of a class.
$(this).closest(".main-div").find(".input").last();
EXAMPLE
$(document).on("click", ".button", function() {
div = `<div class="second-div"><input name="something" class="input"/></div>
<div class="third-div"></div>`
$(".input").removeClass("highlight");
$(this).closest(".main-div").find(".input").last().addClass("highlight");
// get nearest <input name="something/> value
// get nearest <input class="a-input" /> value
$(".main-div").append(div);
});
.highlight{
background:#b00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
<div class="second-div">
<input name="something" class="input" />
</div>
<div class="third-div">
<input name="another input" class="a-input" />
</div>
<div class="fourth-div">
<button type="button" class="button">Click Me</button>
</div>
</div>
<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/
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>
How can I only affect the element that when I focus on the input type the error message below it should be gone, problem is when I focus on the input type the error message hides all. Hope you can help me. Thanks in advance
This is my HTML structure
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields</div>
</div>
<div class="form-group">
<input class="form-control" type="text" />
<div class="form-message">Please all fields </div>
</div>
my Jquery
$(document).ready(function() {
$('.form-control').focus(function(e) {
if($(e.target).next('.form-message').css('display') == 'block'){
$('.form-message').hide();
}
});
});
Try it like this:
$(document).ready(function() {
$('.form-control').focus(function(e) {
var formMessage = $(e.target).next('.form-message');
if(formMessage.css('display') == 'block'){
formMessage.hide();
}
});
});
Fiddle: https://jsfiddle.net/gveukc0b/
Try this,
$(document).ready(function() {
$('.form-control').focus(function() {
$(this).next().hide();
});
});
i would like to click in plus ,then show the next field in every step but my code does not work in third step .is there any method to do these steps for unlimited time?tnx
<html>
<head>
<script>
function showfield(){
document.getElementById("hiddenfield").style.display="block";
}
</script>
</head>
<body>
<div class="form-group" >
<div class="rightbox"> <label for='phone'>Phone1</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone2</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone3</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
</body>
</html>
You can use unique id for each hidden field, then send current id to your function as parameter.
function showfield(id) {
document.getElementById(id).style.display="block";
}
Another option is jquery:
$('.plus').on('click', function() {
$(this).parent().next().show();
});
Check out jsfiddle.
As others noted, ID of an element must be unique, you can use class to group similar elements.
What you need to do is to show the first hidden field group,
function showfield() {
var el = document.querySelector(".hiddenfield");
if (el) {
el.classList.remove('hiddenfield')
}
}
.hiddenfield {
display: none;
}
<div class="form-group">
<div class="rightbox">
<label for='phone1'>Phone1</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group hiddenfield">
<div class="rightbox">
<label for='phone2'>Phone2</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
<div class="form-group hiddenfield">
<div class="rightbox">
<label for='phone3'>Phone3</label>
</div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>
Supported in IE10+
Since you've tagged jquery, you could do away with all those (duplicate ids) and showField() and within doc load add this:
$('.plus').on('click', function() {
$(this).parent().next().show();
});
[Edit: Oh, here's the fiddle]
However, I'm not sure what you want to happen when the third + is clicked as there are no more divs to show.
Change id="hiddenfield" to class="hiddenfield" in all divs and change showfield as below :-
function showfield() {
document.getElementsByClassName("hiddenfield").style.display="block";
}
Note:- Supported Browsers IE9+, Chrome 4+, FF3+.
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp