getting input box value undefined in alert box - javascript

I want to get input field value. Only based on class and id name.
I am getting undefined in alert box.
Not getting any value which i have entered in input box.
HTML
<div id="tab1" class="tab-pane active">
<div class="input-text">
<div class="input-append">
<input id="textData" class="input-xxlarge" type="text" name="inputName" />
<button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
</div>
</div>
</div>
JS
$('#pressme').on({
'click': function () {
var data = $(".tab-pane active #textData").val();
alert(data);
}
});

.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:
$("#textData").val();

You can use the selector as your text box id enough
var data = $("#textData").val();

Your selector is incorrect as the div has both classes, so you need to join them together like this:
var data = $(".tab-pane.active #textData").val();
Note that id selectors should be unique, so in effect the class selector is redundant anyway.

It will be like
$('#pressme').on({
'click': function () {
var data = $(".tab-pane.active #textData").val();
alert(data);
}
});
Makesure that you have enclosed it on DOM ready

TRY THIS:
$('#pressme').on('click',function () {
var data = $("#textData").val();
alert(data);
});

Related

jQuery ID Return is undefined although HTML ID is defined

I'm trying to retrieve the ID of one element, store it as a variable and then use that ID value to interact with other elements in that section with the same ID.
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>
And then the JS/jQuery
function readMore() {
var subID = event.target.id;
var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");
alert(newTarget.id);
}
At this point I'm only trying to display the ID of the selected element but it is returning undefined and in most cases people seem to notice that jQuery is getting confused because of the differences between DOM variables and jQuery ones.
jsfiddle: https://jsfiddle.net/dr0f2nu3/
To be completely clear, I want to be able to click on one element, retrieve the ID and then select an element in the family of that clicked element using that ID value.
just remove the getElementsByClassName("articlePara"); in end of the newTarget .already you are call the element with id alert the element of the id is same with target.id
function readMore() {
var subID = event.target.id;
var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
<div class="articleContent">
<h1>header</h1>
<p class="articlePara" id="one"></p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">click
</div>
</div>
As you have read before, you should keep your id's unique, and you should avoid using onclick in html, but you could do it like this.
With querySelector you get the element and then with parentElement you can retrieve the parent of that element.
function readMore(el) {
var articleFooterId = el.id;
var articlePara = document.querySelector(".articleContent #"+articleFooterId);
var articleContent = articlePara.parentElement;
console.log('articleFooter', articleFooterId);
console.log('articlePara', articlePara);
console.log('articleContent', articleContent);
}
In your html you can return the 'this' object back to the function by doing readMore(this).
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore(this)">footertext</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore(this)">footertext</div>
</div>
jsfiddle
if you're using Jquery:
$(function () {
$('div.articleFooter').click(function () {
var para = $(this).prev().find('p.articlePara').text();
alert('T:' + para);
});
})
$('.articleFooter').click(function() {
var b=subId; //can be any
var a="p[id="+b+"]"+"[class='articlePara']";
$(a).something;
});
You have forgotten to pass in event as parameter in your onclick= call in html.
In your javascript, you need to include event in the parenthesis as well.
window.readMore = function(event) {...}
if you write document.getElementById(subID).getElementsByClassName("articlePara"); That's saying you want to get your clicked element's CHILD elements that have class equal to articlePara . There is none. So you get undefined.
If you want to find all element with a ID one and a class articlePara, it can be done easily with jQuery:
newtarget = $("#one.articlePara");
You can insert a line: debugger; in your onclick handler function to trigger the browser's debugging tool and inspect the values of variables. Then you will know whether you are getting what you want.

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent
$(document).ready(function(){
$(".Trigger_modi").delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
This is jquery function that would be triggered if i click "a" tag.
and this would make table look like this ↓↓↓↓↓↓↓↓
This is description of what is happening
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>
and this html code is wrapped by for loop which i suspect that it might be reason why i am getting trouble with
anyone suggest i could try?
<a class="Trigger" id="<%=idx %>"> <%=subject %></a>
<div class="Slider slideup">
<div id="Actual"><!-- 누르면 본문내용 보게됨. -->
</form>
<jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
<jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>
<div class="inner_element_1"><%=content %></div>
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
<div class="">
<div id="Actual_modi">
</div>
</div>
<div class="inner_element_3">Delete</div>
<div class="inner_element_4"></div>
<div class="inner_element_5"></div>
</div>
</div>
**
Edit 1) it works, appreciate for all you comment, reply
**
i first suspected that the problem was caused by for loop, and it turned out to be right.
[assume for loop loops 5times.]
when for loop finished and in javascript function triggers, the inner_element_(number) --> all 25 element(for loop 5 times * 5element) is set to same html tag for each number of element. i change it to something like <div class="inner_element_<%=idx%>"> which makes possible for 25 element to have a different class value individually. and it works fine. thanks
**
Edit 2) All I did to make it completely work fine : turned out Integrity problem
**
<div class="inner_element_(number) to <div class="inner_element_<%=idx %>
$('.inner_element_(number)') to $('.inner_element_'+tnp)
and i delete e.stopPropagation();
event.stopImmediatePropagation();
and i change $(".Trigger_modi").delegate("a", "click",function(e){ to $(".Trigger_modi").click( function (frm) {
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
In the above code you are assigning html to all .inner_element_1, .inner_element_2, .inner_element_3, .inner_element_4 and .inner_element_5 which jQuery will look all element with class inner_element_[1-5] of the whole page. So it may not raised another row event, it may just simply a HTML binding logic error in this case.
Try to revise your function as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');
$Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
$Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
Edit 1 -
Please wrap the above code inside a $(document).ready() and also revise the first 3 lines as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.find("a").on("click", function(e){
....
Edit 2 -
After looked into your noticeList.jsp, I think you have to revise all your elements that contain the id attribute inside the for loop since it is not allowed to contains 2(or more) elements share the same id in HTML.
Also, since you are looping via for(int i= (n-1) ;i<=(n-1)+x;i++), it is not allowed in HTML that using digit only in the id attribute, so you have to revise your a element as follow as well:
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>
After that, you could give a class name for your td as follow:
<td class="TriggerCell">
<form name=f>
And revise the code in edit 1 as follow:
$(".TriggerCell").each(function () {
var $TriggerCell = $(this);
$TriggerCell.find(".Trigger_modi a").on("click", function(e){
var tnp = $(this).attr("data-id");
....
Try the following
$(document).ready(function(){
$(".Trigger_modi").on("click","a",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$(this).parent().find('.inner_element_1').html('<input type="text" name="subject" value="">');
$(this).parent().find('.inner_element_2').html('<h2 > yahoo</h2>');
$(this).parent().find('.inner_element_3').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_4').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});

How to check if the element is visible

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>
"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}
Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");
It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>
$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')

Fill data into all of my spans

I have 8 spans, 4 of the spans with values retrieved from Database are visible when page loads. The other spans are in my own popup box, when a user clicks on the button to view the popup, the value from the spans that were visible needs to also be inside the spans within the popup box.
So I used a each() function with two classes, '.heart' is the class that has the first 4 spans which are visible when page loads. '.likes-count' is another class that has 4 spans within a popup box.
My aim is to assign whatever value is in the first 4 spans to the other spans within popup box.
Im currently stuck in the code below.
JS
$('.heart, .likes-count').each(function(i, element) {
var thisID = "#" + $(this).attr('id'); // '#like1', '#like2'
var getAgain = "." + $(thisID + " span").attr('class'); // .likeCount1
getAgain = $(getAgain).text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can iterate through the spans of your first div using jQuery's each. The callback function of each gives you an index parameter which you can use to select the corresponding indexed span of the other div.
$("#hearts span").each(function(index){
var text = $(this).text();
$("#likes span").eq(index).text( text );
});//each
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hearts">
<span>12</span>
<span>24</span>
<span>36</span>
<span>48</span>
</div>
<div id="likes">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
try this:
$('.heart').each(function(i) {
$('.likes-count:eq('+i+')').text($(this).text())
});
You can use callback function of .text() instead of using .each() to achieve this:
var heartspans = $("#hearts span");
$("#likes span").text(function(i,o){
return heartspans.eq(i).text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hearts">
<span>12</span>
<span>24</span>
<span>36</span>
<span>48</span>
</div>
<div id="likes">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

How to get class of item selected in jquery?

I have 2 images (.field-img) , wrapped in a container (.group-container),
each of the images are in a unique field id, so my tpl is broken down into
<div class=group-container>
<div id=field1>
<div class=field-img>
</div></div>
<div id=field2>
<div class=field-img>
</div></div>
</div>
my js is
$(".group-container .field-img").click(function() {
alert(".group-container .field-img");
what I would like is to detect automatically if the image belongs to field1 or field2.
So I could alert (".group-container .field1/2 .field-img");
How would I do this?
Thanks for any help
$(".group-container .field-img").click(function() {
var field=$(this).parent().attr('id');
});
An alternative to Izzey's solution is to use .closest with an attribute starts with selector (or classname because it would be more appropriate for those divs to have a common class)
$(".group-container .field-img").click(function() {
var field = $(this).closest("[id^=field]")[0].id;
});
or, with a common classname,
html
<div class=group-container>
<div class="field" id=field1>
<div class=field-img>
</div></div>
<div class="field" id=field2>
<div class=field-img>
</div></div>
</div>
js
$(".group-container .field-img").click(function() {
var field = $(this).closest(".field")[0].id;
});
$(".group-container .field-img").click(function() {
var field = this.parentNode.id;
alert (".group-container ." + field + " .field-img");
});
$(".group-container .field-img").each(function() {
$(this).click(function(){
var fieldid=$(this).parent().attr('id');
});
});
Since one element is inside the other, the click will propagate up anyway, so you could always just bind the click to the parent element and do :
$('div[id^="field"]').on('click', function() {
alert(".group-container "+this.id+" .field-img");
});
FIDDLE
or even get them all dynamically:
$('div[id^="field"]').on('click', function(e) {
alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});
FIDDLE
​

Categories