How to get value in li using js in jquery mobile - javascript

<div id="radiodiv1">
<ul id="span1" data-role="listview">
<li>value1</li>
<li>value2</label></li>
</ul>
</div>
<br>
<table style="border:none;">
<tr>
<td>
<input type="text" id="item" />
</td>
<td>
<input type="button" value="Add params to list" onclick="appendToList()"/>
</td>
</tr>
</table>
script
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product);
});
});
when clicked the button am getting in log as
Object[li.ui-li-static.ui-body-inherit.ui-first-child]
Object[li.ui-li-static.ui-body-inherit.ui-last-child]
i have to get the values as value1 and value2
can someone say what was wrong here

You want to get the text() property, not the entire object, change this:
console.log(product);
to this:
console.log(product.text());

Use
console.log(product.text());
(it is plain vanilla jQuery)

problem is with this line
var product = $(this);
You have to extract text
var product = $(this).text();

$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
jquery get the id/value of LI after click function

you should use :
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product.text());
});
});
bur before that add the id="bizParams" to your button.
<input type="button" id="bizParams"value="Add params to list" />

Related

Table Anchor Click Get Parent Class Value

Here is my html code:
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow();">Contact Now</a>
</td>
my javascript function is as follow's:
function contactnow()
{
var id=$(this).parent('.user_id').val();
alert(id);
}
I need to get the value of hidden field on click on this anchor, these anchor's are multiple on same page as looping data from database.
Pass reference in onclick attribute.
<a class="contactnow" href="#" onclick="contactnow(this);">Contact Now</a>
use this
function contactnow(e)
{
var id=$(e).parent().find('.user_id').val();
//or
var id=$(e).siblings('.user_id').val();
alert(id);
}
However instead of using javascript in html attributes you can separate your javascript entirely which is lot more cleaner and you don't have to repeat onclick everytime for it to work in multiple elements. Remove onclick attribute
Html
<a class="contactnow" href="#">Contact Now</a>
JS
$('.contactnow').click(function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
// if you are using dynamically added element use
$(document).on('click','.contactnow', function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
Remove the inline event handler and use:
$('a.contactnow').click(function() {
console.log($(this).prev('input').val())
})
jsFiddle example
As I commented above, $(this) isn't what you think it is since you pass nothing to your function. The you need the .prev() element, not the .parent().
If you want to continue to use the inline event handler you need to pass the this keyword.
Change:
onclick="contactnow();"
to:
onclick="contactnow(this, event);"
function contactnow(ele, e)
{
var id=$(ele).siblings('.user_id').val();
alert(id);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow(this, event);">Contact Now</a></td>
</tr>
</tbody>
</table>
I see that you tag jquery, here is an simple example of it.
$('button').on('click', function () {
var answer = $(this).prev().val();
alert(answer)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" value="4">
<button>click me</button>

How can I get the Text value of input?

How can I get the value of the textbox?
<input class="num1" type="text" val=""><br>
<button class="show">Click</button>
this is my Js code:
var value = $('.num1').text();
$('.Click').click(function(){
$('<'p>').text(value);
});
when I clicked the "click" button I want to show in a paragraph the text that I'd input to the textbox.
Use .val() for form elements to retrieve or set its value. Also, care with typo when you set the paragraph text.
var value = $('.num1').val();
$('.show').on('click', function(){
$('p').text(value);
});
In your code there is an error: if you want to catch the click event you should use the class of the button. Another error in your code is about the single quotes you use to insert value into the <p>. And remember, is $('p'), not $('<p>').
The code should look like that:
$('.show').click(function(){
$('p').text(value);
});
You can use this code:
jQuery
$(function(){
$("form").on("submit", function(event){
event.preventDefault();
var text = $(".num1").val();
$("#outputText").text(text);
})
});
Your HTML should be something like that:
HTML
<form>
<input class="num1" type="text" val="">
<button class="show">Click</button>
</form>
<p id="outputText"></p>
Note that in this case is really important to stop the default event behavior using preventDefault().
If you are not using a form the previous code became something like that:
jQuery
$(function(){
$(".show").on("click", function(event){
var text = $(".num1").val();
$("#outputText").text(text);
})
});
HTML
<input class="num1" type="text" val="">
<button class="show">Click</button>
<p id="outputText">
</p>
The outputText div is a div I've created to show the text.
I've prepared jsfiddle1, jsfiddle2 you can use to see the code in action, I hope it helps ;-)
That would be
var value = $('.num1').val();
Use the val() operator on the input to get the value, and then you could use the following code:
Html:
<input class="num1" type="text">
<button class="show">Click</button>
<p class="output"></p>
Javascript:
$('button').click(function(){
$('.output').html($('.num1').val());
});
use .val() not .text()
$(".show").click(function(){
var value= $(".num1").val();
$(".para").text(value)
});
demo
$('.show').click(function () {
var value = $('.num1').val();
$('p').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num1" type="text" val=""></input>
<button class="show">Click</button>
<p></p>
There are type mistakes
var value = $('.num1').val(); should be in click method.
Use val() instead of .text() to get the input value.

Call table row name attribute instead of .eq(n)

i want this code to be reusable ,instead of this :
$(this).closest("tr").find("td input").eq(1).val()
i was hoping for calling it by name using :
(($(this).closest("tr").find("td input").attr("name")) so i dont have to set every .eq(n)
but its not working :
here's my jquery code :
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input").eq(1).val() == "ADD") alert("add");
else alert("change");
});
see this working FIDDLE for my first code.
id attributes should be unique. Also you're looking for the attribute selector in jQuery. EG.
$(this).closest("tr").find("td input[type='text']").val();
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find("td input[type='text']").val();
alert(inputVal);
});
UPDATE FIDDLE
UPDATE BASED ON COMMENTS
It appears that you could have more than one input of type text in your table cell. As such i would suggest adding a class to the input element you are looking to get the value from.
HTML
<table class="tdiv">
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="ADD" />
</td>
</tr>
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="CHANGE" />
</td>
</tr>
</table>
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find(".getVal").val();
alert(inputVal);
});
EXAMPLE FIDDLE
First of all you should not use id for multiple elements, so change id="tddelete" to class="tddelete" for all button elements.
<input type="button" class="tddelete" />
You can find for input element present in next td of button's parent td. Don't forget to put name attribute for input elements.
$('.tdiv').on("click", ".tddelete", function () {
var val = $(this).closest("td").siblings().find("input[name=flag]").val();
alert(val);
});
Demo
Instead of using attr, use an attribute selector in your find method .find("td input[name=somename]")
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input[name=somename]").eq(1).val() == "ADD") alert("add");
else alert("change");
});

Get tag attribute in Onclick event

<div style='padding:10px;border:1px solid #888;width:150px;' id='btnTest' data-id='1'>
<label>
<input type='checkbox' name='test1' />
TEST1
</label>
<label>
<input type='checkbox' name='test2' />
TEST2
</label>
</div>
<script>
$(function() {
$('#btnTest').click(function(e){
console.log($(e.target).attr('data-id'));
})
});
</script>
In that test code, if I click the label area, I can not get the data-id value,
Is there any way I can get the data-id even I click the other element in that DIV tag?
$(this).attr('data-id');
e.target refers to the element clicked, this to the element where the handler is binded.
Use 'this':
$(function() {
$('#btnTest').click(function(){
console.log($(this).attr('data-id'));
})
});
However if you want the checkbox's 'name':
Do:
$(function() {
$('#btnTest label input').click(function(){
alert($(this).attr('name'));
})
});
Yes you can simply do:
$(function() {
$('#btnTest').click(function(e){
console.log($(e.target).parent('#btnTest').attr('data-id'));
})
});

Get variable input value on button click

not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>
$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo
You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});
This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});
You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});

Categories

Resources