HTML
<div id="wrapper">
<input type="text" id="text">
<button id="t-1" value="1">1</button>
<button id="t-2" value="2">2</button>
<button id="t-3" value="3">3</button>
</div>
JavaScript
$(function() {
$('#wrapper').click(function(event) {
$('#text').append(event.target.value);
});
});
Clicking the button does not change the text-field-value!
Use this:
$(document).ready(function(){
$('#wrapper').click(function(event) {
$('#text').val(event.target.value);
});
});
Remember append is to add HTML content, whereas val is to get and set the input field value.
append adds HTML content after the input. What you are looking for (changing the text of the input) is val.
You need to use val() to set value of a textbox. append() is used to append a DOM element into another element (like appending dynamic li into ul tags). Below is a working snippet
$(function() {
$('#wrapper').click(function(event) {
$('#text').val(event.target.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<input type="text" id="text">
<button id="t-1" value="1">1</button>
<button id="t-2" value="2">2</button>
<button id="t-3" value="3">3</button>
</div>
Related
I'm editing woocomerce plugin. I want to create quantity button that will change nearest product quantities when click.
<div class='product-1'>
<div class='changeQtyButton'>
<button class='buttonNumber'>1</button>
<button class='buttonNumber'>2</button>
<button class='buttonNumber'>3</button>
<div>
<div class='quantity'>
<input class='quantityInput-1'>
<div>
</div>
<div class='product-2'>
<div class='changeQtyButton'>
<button class='buttonNumber'>1</button>
<button class='buttonNumber'>2</button>
<button class='buttonNumber'>3</button>
<div>
<div class='quantity'>
<input class='quantityInput-2'>
<div>
</div>
<script>
jQuery('button').on('click', function(){
//inputQty = jQuery(this).next('input').attr('name') ;
test = jQuery(this).closest( "div.changeQtyButton" ).find("input[name=''quantity]").val();
console.log(test);
});
</script>
So how can I select the nearest input when click the button?
You need to go one level up, find next element and input inside.
$('button').on('click', function() {
$(this).parent().next().find('input')
})
.parent() is .changeQtyButton
.next() is .quantity
Or
$(this).closest('[class^=product-]').find('input')
I am struck in a problem, where I need to point out the current number of the class I am using in JS. For example here is my code:
<div>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
</div>
Now I know if I type document.getElementsByClassName("child"), it will provide me an array with all the able usage of class p mentioned. However I want to know the exact button which was clicked.
Like if the second button p class was clicked, I want my function to return me the number 2. Similarly if the third button was clicked, I want the number 3 returned to me. Is there any function for that? How should I proceed? I am completely new to JS.
What you're trying to do is called Event Delegation in javascript. You just add the event listener on the parent element in order to avoid having to add event handlers to multiple child elements.
e.target gives you the element on which the event handler (here click) was called on. You can get info regarding that element using various properties like e.target.textContent gives you the button text.
const container = document.querySelector(".container")
container.addEventListener('click',(e)=>{
console.log(e.target)
console.log(e.target.textContent)
})
<div class="container">
<p><button type="button">Click here 1</button></p>
<p><button type="button">Click here 2</button></p>
<p><button type="button">Click here 3</button></p>
<p><button type="button">Click here 4</button></p>
</div>
You can pass this to the function, which is the current element.
I've added code to find all .child elements, and find the index that matches this button's parent, and then alert it.
I would recommend using addEventListener instead of onclick attributes.
Depending on what you are doing, I'd recommend adding data="n" attributes added to the DOM elements, or an object map of values. But this will work as is:
function myfunction(el){
const index = Array.from(document.getElementsByClassName('child'))
.findIndex(x=>x===el.parentNode);
alert(index);
}
<div>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
</div>
You can loop over the list of elements having this class, add the event listener to each item, so you can access the number inside the function normally. Here is an example:
let childs = document.getElementsByClassName('child');
for(let i = 0; i < childs.length; i++){
let el = childs[i];
el.addEventListener('click', function(e){
console.log(i+1);
});
}
<div>
<p class="child"><button type="submit">Click here 1</button></p>
<p class="child"><button type="submit">Click here 2</button></p>
<p class="child"><button type="submit">Click here 3</button></p>
<p class="child"><button type="submit">Click here 4</button></p>
</div>
I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
How to delete div with jQuery that is dynamically created with unique id?
i am trying to use below code but it is not working.
HTML CODE
<div class="div-roomcart" id="divOAK1AKL">
<div class="div-roomcart-hotel">
<div class="div-roomcart-hotelname">Eden Park Bed And Breakfast</div>
<div class="div-roomcart-roomtype">Single Standard</div>
</div>
<div class="div-roomcart-room">
<div class="div-roomcart-roomprice">14058.26</div>
<div class="div-roomcart-roomaction">
<input type="submit" id="submit" value="Remove" class="btnbook" onclick="removeroom(divOAK1AKL)">
</div>
</div>
there will be multiple of div which i have to delete on onclick="removeroom(code)" this is a jQuery function below is the jQuery Code
jQuery Code in removeroom.js
function removeroom(hotelcode){
$("'#"+hotelcode"'").remove();
}
There is no need to wrap the selector once again with single quotes,
function removeroom(hotelcode){
$("#" + hotelcode).remove();
}
That will make the selector invalid. Also you can use an dedicated event handler for it rather than using an inline event handler. Inline event handler has more disadvantages, and the most important one from that is maintenance.
try this one
function removeroom(hotelcode){
$("#" + hotelcode).remove();
}
or
just pass the perameter with selector
like
removeroom("#hotelcode"); // calling function hare.
function removeroom(hotelcode){
$(hotelcode).remove();
}
without Jquery,
function removeroom(hotelCode) {
typeof hotelCode == 'object' ? hotelCode.remove() : document.getElementById(hotelCode.toString()).remove();
}
<div class="div-roomcart" id="divOAK1AKL">
<div class="div-roomcart-hotel">
<div class="div-roomcart-hotelname">Eden Park Bed And Breakfast</div>
<div class="div-roomcart-roomtype">Single Standard</div>
</div>
<div class="div-roomcart-room">
<div class="div-roomcart-roomprice">14058.26</div>
<div class="div-roomcart-roomaction">
<input type="submit" id="submit" value="Remove" class="btnbook" onclick="removeroom('divOAK1AKL')">
</div>
</div>
Hope this helps..:)
i have div like this use javascript :
<script>
$(document).ready(function(){
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
$("#btnmsg-2").click(function(){
$(".msgid-2").show();
});
$("#btnmsg-3").click(function(){
$(".msgid-3").show();
});
$("#btnmsg-4").click(function(){
$(".msgid-4").show();
});
});
</script>
<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
<div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
<div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
<div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
<div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
if i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?
Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide
ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all other .msgedit elements.
$(document).ready(function() {
var $edits = $('.msgedit')
$(".btnmsg").click(function() {
var $this = $(this).parent().next().show();
$edits.not($this).hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
<button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
<button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
<button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
<button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
Please add same classes to similar elements, and then use this jQuery code instead:
$(document).ready(function(){
$(".btnmsg").click(function(){
$(".msgid").hide();
$(this).parent().next(".msgid").show();
});
});
See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/
jsBin demo
don't use msgid-1, msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
Don't use inline styles. Use <style> instead or call-to an external stylesheet.
HTML
<div class="btn">
NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send">
</div>
CSS:
.msg{
display:none;
}
See how more readable is now your code?
jQuery:
var $msg = $(".msg"); // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
$msg.hide(); // Hide all
$(e.delegateTarget).next().show(); // Show next
});
You can do this by calling hide() on the elements you would like to hide.
For example, you would make the following change:
// Old
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
//New
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
$(".msgid-2").hide();
$(".msgid-3").hide();
$(".msgid-4").hide();
});
A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:
$("#btnmsg-1").click(function(){
$("#message").hide();
$(".msgid-1").show();
});
Hope that helps!