I have a loop that display buttons with class name that has javascript on it. I need to pass the id of span that is clicked. My problem is because of the loop there, I can get the ID by its index but what I want to get is the id of the clicked button dynamically.
while(...){
<span class="id">'.$table["id"].'</span>
<input type="button" class="edit" value="Edit"/>
}
$('.edit').on('click', function (e) {
var x=document.getElementsByClassName("id")[0];
var xx = x.innerHTML;
$.fancybox({
...
}
});
});
sounds like you want to use
var x= $(this).closest("span");
that should get you the span next to the button clicked.
Could you use just $(this). within your click event?
You don't need to do this:
var x=document.getElementsByClassName("id")[0];
just say
var x = $(this);
because you are already on your element there, when the click event happens.
Hope it helps! :)
I would go with data attributes for passing variables, so you can leave classes for css style purposes only. Also if you are already using jQuery why not going all the way with it?
while(...){
<span class="id" data-id="id">'.$table["id"].'</span>
<input type="button" class="edit" value="Edit" data-target="id"/>
}
$('.edit').on('click', function (e) {
var data = $(this).data('target'); // Get the data-target attribute
var target = $('*[data-id='+data+']'); // Find the matching span
var xx = target.html(); // Get HTML from Span
$.fancybox({
...
}
});
});
Related
I have a button when user clicks the button it create the text box along with remove button
but all the text boxes created with same id how we can delete the text box when clicks respective remove button
here My Code:
<body>
<button type="button" id="URLbtn" onclick="Createinput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
<script>
function Createinput() {
var newdiv=document.createElement("div");
newdiv.id="test"
var Inputele=document.createElement("input");
Inputele.type="text";
Inputele.id="URLtxt"
newdiv.appendChild(btnele);
var btnele=document.createElement("button");
btnele.id="rmvbtn"
btnele.type="button"
btnele.innerHTML="-"
btnele.onclick=RemoveUrlBox()
newdiv.appendChild(btnele);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newdiv);
}
function RemoveUrlBox() {}
</script>
</body>
i am getting following output
if user click 2 remove button only remove the second textbox and button
You need to select the wrapping div. Easiest way is to use remove() and use closest. No need to use the id..... You also need to remember ids need to be unique.
function createInput() {
var newDiv = document.createElement("div");
newDiv.className = 'group';
var inputElem = document.createElement("input");
inputElem.type = "text";
newDiv.appendChild(inputElem);
var btnElem = document.createElement("button");
btnElem.type = "button";
btnElem.textContent = "-";
btnElem.addEventListener("click", removeUrlBox);
newDiv.appendChild(btnElem);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newDiv);
}
function removeUrlBox() {
this.closest('.group').remove();
}
<button type="button" id="URLbtn" onclick="createInput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
This should do the trick:
const txtarea=document.getElementById('TextAreaBtn');
document.getElementById('URLbtn').onclick=()=>txtarea.innerHTML+=
'<div><input type="text" class="URLtxt"><button class="rmvbtn">-</button></div>';
txtarea.onclick=ev=>ev.target.className==="rmvbtn"&&ev.target.parentNode.remove()
<button type="button" id="URLbtn"> + Add URL</button>
<div id="TextAreaBtn"></div>
I replaced your id attributes with class attributes, as these don't need to be unique.
I reduced your script by using innerHTML instead of laboriously putting elements together with createElement(). This is a matter of opinion as both methods have their advantages.
I also used delegated event listener attachment for the removal buttons. This way you can get away with a single event listener on div.TextAreaBtn. The attached funcion will only trigger any action if the clicked element has class "rmvbtn".
Change
btnele.onclick=RemoveUrlBox()
to
btnele.addEventListener('click', function (e) {
// `this` is the button that was clicked no matter about the id
// `this.parentNode` is the div you want to remove
const nodeToRemove = this.parentNode;
nodeToRemove.parentNode.removeChild(nodeToRemove);
});
This is what I've done so far - but I also need to handle and empty comment, clear the field after submission and post multiple comments. Don't want answers really - just hints as to where I need to look and if I'm completely off base.
function registerClickHandler() {
var commentButton = document.getElementByID('postComment');
commentButton.onclick = addComment();
}
function addComment() {
var list = document.getElementByID('commentList');
var commentContent = document.getElementByID('comment')
var newComment = document.createElement('li');
newComment.appendChild(document.createTextNode(commentContent));
list.appendChild(newComment);
}
<ul id='commentList'>
</ul>
<form>
<input type='text' id='comment'/>
<input type='button' id='postComment' value='Post'/>
</form>
Take a look to this code working example, basically you have syntax error:
change all ocurrencies of getElementByID for getElementById
document.getElementByID('postComment');
for
document.getElementById('postComment');
And call the function which define the click handler
registerClickHandler();
Get the value for the element
var commentContent = document.getElementById('comment').value;
Some hints:
There's no getElementByID function, only getElementById, because javascript is case-sensitive.
commentButton.onclick = addComment(); is wrong because you call addComment function instead of assigning it as an event-handler to the onclick event. You should remove the parentheses commentButton.onclick = addComment;.
Use document.getElementById('comment').value; to get or set the value of your text input.
Using the below code I append some input elements into the #cls div. But when I try to type inside the input also new input add. I only need new input when I click "click" text. Can anyone help me. Thank you
$('#cls').click(function() {
var add="<input type="text">"
$(#cls).append(add);
});
<div id="cls">click</div>
You need to see whether the click actually happened in the div
$('#cls').click(function(e) {
if ($(e.target).is(this)) { //or !$(e.target).is('input')
var add = '<input type="text">';
$(this).append(add);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cls">click</div>
If you user .after() method instead of .append() the textbox would appear outside the #cls div and hence clicking the textbox wouldn't cause adding a new one.
Some code
$('#cls').click(function() {
var add="<input type='text'>";
$('#cls').after(add);
});
Try it out
Append your input to parent element:
var clicked= false;
$('#cls').click(function() {
if(!clicked){
var add="<input type='text'>";
$(this).parent().append(add);
clicked = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cls'>click</div>
use jQuery's one method. it will register click handler only once.
$('#cls').one("click", function(e) {
var add = '<input type="text">';
$(this).append(add);
});
i append a textarea with a button
$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");
After that , i'm writing new texts into textarea and trying to get new writed value inside from textarea with this on click function ;
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
});
But it says that this an "empty string" , if i add text area with a value like <textarea id="myTextarea">some text</textarea> my fucntion works and gives me "some text" but if i edit textarea and click sendReply button (my on click function), it is still gives me "some text" , it don't change
How can i get edited textarea value after apppend a textarea?
You have an . in .sendReply while appending the HTML
You just need to remove . from .sendReply
Use
<div class='sendReply btn btn-default'>my button</div>"
As you are using Event delegation your jQuery will work.
As you are adding textarea with same ID multiple times? $("#myTextarea").val() will always show value of first textarea with id myTextarea. You can use a common class and then use prev() to select the textarea
See example
$(document).ready(function() {
$(document).on('click', '.sendReply', function() {
var myNewText = $(this).prev(".myTextarea").val();
alert(myNewText);
});
for (var i = 0; i < 5; i++) {
$(".mydiv").append("<textarea class='myTextarea'>some text</textarea><div class='sendReply btn btn-default'>my button</div>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mydiv'></div>
It should be
$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");
then
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
});
dont use dot(.) for the classname..
Instead using div .. use some standard to code up .. you can make it has button .. here is the code
<div class="mydiv"></div>
$(".mydiv").append("<textarea id='myTextarea'></textarea><input type='button' class='sendReply btn btn-default' value='my button'></input>");
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
alert(myNewText);
});
JSFIDDLE
I’d like to add a button to certain text fields to allow for additional input methods. Since the button should be able to reference the text field it belongs to, I'm adding a parameter to the function call within the button’s onClick() handler, containing the ID of the text field.
At least, this is my plan. When I obtain the ID of the text field, and display it in an alert, it displays nicely. However, when I use the result of $(this).attr('id') as a function parameter, I'd expect a string to be given to the function (the id of the element). Instead some weird object is given.
How do I convert that object to a string? Or is there a conceptual flaw?
<form>
<input class="joeDateTime" type="text" name="n1" id="n1" value="2014-09-01 17:30:00">
</form>
<script>
function handleJoeDateTime(e)
{
alert('Edit '+e); // shows 'Edit [object HTMLInputElement]'
}
$(document).ready(function() {
$('.joeDateTime').each(function(){
var i = $(this).attr('id');
alert(i); // shows 'n1'
$('<button onclick="handleJoeDateTime(' + i + ');return false;">📅</button>').insertAfter($(this));
});
});
</script>
You are not passing i as a string value, you are passing it as an variable. In modern browsers the element's id are copied to properties of the window object(so you can access then as global variables).
So you need to enclose them using quotes to pass i as a string value
$('<button onclick="handleJoeDateTime(\'' + i + '\');return false;">📅</button>').insertAfter($(this));
Demo: Fiddle
Also Instead of using inlined event handlers, I would recommend using jQuery event handlres
$('.joeDateTime').each(function () {
var i = $(this).attr('id');
console.log(i); // shows 'n1'
$('<button />', {
text: '📅',
click: function () {
handleJoeDateTime(i);
return false;
}
}).insertAfter(this);
});
Demo: Fiddle
Your problem lies here:
$('<button onclick="handleJoeDateTime(' + i + ');return false;">📅</button>')
where this should be
$('<button onclick=\"handleJoeDateTime(\"' + i + '\");return false;\">📅</button>')
When you're passing an element to jQuery ( $ ), it becomes a jquery object.
It had been made to handle id, class, elements, not html chunks.
What you want is inserting a piece of concatenated elements as an html node.
so first concatenate your elements then append it with the jQuery's after() method.
(or create/append it with vanilia js var btn = document.createElement("BUTTON");)
var Button = '<button class=\"AltBut\" id=\"' + i + '\">📅</button>';
$(this).after(Button);
or ( for compacity )
$(this).after('<button class=\"AltBut\" id=\"' + i + '\">📅</button>');
In this exemple, I'm adding an id to each enabled buttons where I store your variable i
Then add a click listener to those buttons, avoid inline js at all price, for maintainability's sacke.
$('.AltBut').on('click',function(){
var i = $(this).attr("id");
alert("i= "+i);
return false;
})
The whole demo is here: http://jsfiddle.net/x6x4v90y/1/