get input attribute on button click - javascript

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?
.prev doesnt work as there is a span directly after input
example
js
$('button').click(function () {
var inputcontent = $(this).prev('input').attr('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<span class="input-group-btn">
<button type="button">Go!</button>
</span>

You need to use .parent() here since input is the immediate previous sibling of parent <span> of the button:
var inputcontent = $(this).parent().prev().attr('id');
Fiddle Demo
Side note: id started with number is invalid HTML4 markup. Reference

Related

Select the custom tag from button attribute

I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>

Select div using jquery not working

I have an event listener on dynamically created elements:
<script>
$(document).on('change', '.inputfile', function() {
var name = ($(this).val().split('\\').pop());
selectFile(name);
});
</script>
Once file is selected, i would like to append a paragraph showing the filename itself. My problem is that jquery selector is not working:
function selectFile(filename) {
alert(filename);
var classes = $(this).closest('.inputgroup');
$('classes').append('<p>'+filename+'</p>');
}
I would like to append the paragraph in the nearest div with class=inputgroup, because there are several div with that class.
Using a simple $('.inputgroup').append('<p>'+filename+'</p>'); is ok and paragraph is created.
This is the HTML:
<div class="inputgroup">
<label class="btn btn-default btn-info" style="margin-top: 8px">
Browse <input type="file" style="display: none;" class="inputfile"/>
</label>
<button type="button" class="btn btn-outline-danger" onclick="myAjax()">Ok</button>
<span id="remove_field" class="glyphicon glyphicon-remove" aria-hidden="true" style="vertical-align: middle"></span>
</div>
This line
$('classes').append('<p>'+filename+'</p>');
Is searching for an element named "classes" - that's not a valid HTML element.
I think you wanted
$(this).closest('.inputgroup').append('<p>'+filename+'</p>');
Based on this line of your question
I would like to append the paragraph in the nearest div with class=inputgroup
But you should put this straight in the event handler, otherwise this has a different meaning
$(document).on('change', '.inputfile', function() {
var name = ($(this).val().split('\\').pop());
$(this).closest('.inputgroup').append('<p>'+name+'</p>');
});
In this line of code
var classes = $(this).closest('.inputgroup');
$('classes').append('<p>'+filename+'</p>');
The first line gives you an jQuery object. Which you can directly use to append the p tag.
As already mentioned in other answer your second line looks for a element named classes which does not exist.
So simply use the Jquery object you have and append the paragraph. Like below
classes.append('<p>'+filename+'</p>');

Issues while reading value of input field in popover using jquery

I have a part of HTML like this which is generated dynamically. all tha value in popover are also generated dynamically. for now I have shown only one <li> value with the id = "loc" which is also given dynamically. I want to read the value of input field with id = "loc". whatever I have tried i can mention below:
in the first line of html you can see id = "close" . When a user will click on a icon with id = "close" I need to reed the value of li in the popover with the id = "loc".
I have tried
$('#data').on('click','.icon-remove',function(){
//var ptr=$(this).parents("tr.task");
//console.log($('i#close').find('p').css('background-color', 'red'));
//console.log(ptr.find(("#loc").val()));
//console.log($("#loc").val());
var $pel = $('.popover').find('#details')
console.log($pel.find('li#loc').val()); // through this I'm getting undefined
console.log($('.popover').find('#loc').val()); // this is giving me undefined
$('.popover').remove();
});
<i id=" close" class="icon-remove title-inner-pop closePop"></i>
<div class="popover-content">
<div>
<div class="more-option">
<span class="labels">1Yr Analytics</span>
<p>12 calls 15hours</p>
<a hrf="#">More...</a>
</div>
<div id="details">
<li>
<span class="labels">Location -</span>
<p>
<input id="loc" type="text" value="d">
</p>
</li>
I'll be really happy If some one can suggest me something to read the value in the input field with id = "loc" when someone click on icon inside popover with id="close".
thanks in advance.
Your over complicating this way to much. You have id's on your elements there is ZERO reason to use the find(). find() is for using advanced queries for dynamic content.
You have very static content simply use the below and that should work.
$("#close").click(function(){
var input = $("#loc").val();
})

button that creates a copy of itself

I have a button next to a text box and when I click the button i want it to create another button next to another text box. This code is doing just that but the new button doesn't work.
<div id="algorithm">
<input type="button" id="add_child" value="+" />
<input type="text" id="textbox0" />
</div>
$('#add_child').click(function() {
$('<input type="button" id="add_child" value="+" />').appendTo('#algorithm');
$('<input type="text" id="textbox0" />').appendTo('#algorithm');
});
I'd suggest trying this approach:
$('#algorithm').on('click','input',function(){
$(this).clone(true,true).insertAfter($(this));
});
JS Fiddle demo.
Revised the above code to update the id attribute so that there are no duplicates:
$('#algorithm').on('click','input',function(){
$(this).clone(true,true).attr('id','add_child' + $('input[type="button"]').length).insertAfter($(this));
});​
JS Fiddle demo.
References:
attr().
clone().
insertAfter().
on().
[attribute="value"] selector.
there are a number of issues with you code.
first of all; you binding is not live so any new elements you add will not get the same functionality.
Secondly you're creating multiple elements with the same id... a BIG no no!
Thirdly since your'e using an ID selector it will stop looking avter it finds the firs one, but i do have a hunch that it WOULD work if you changed your binding to $().live("click", function(){})

Have multiple buttons with same attributes (class, type, value, etc) that can "point out" their parent DIV when called?

I'm having some trouble figuring this out. I want to make it so I can place a button in a number of different DIVs but have all the info for the button be the same (class, type, value, etc), this is because its an edit button for the DIV so its just something that is automatically included with any new DIV that is created and my server-side app will generate these buttons automatically. So the issue is how to get the ID of the parent DIV, and I am having some trouble with this as it seems to always default to DIV upd1 even when I click the button contained within upd2, I've been searching on this but everything I have found so far hasn't led me out of this issue.
<div id="upd1">
<input id= "button" class="button" type="submit" value="Click to edit this Panel" />
</div>
<div id="upd2">
<input id= "button" class="button" type="submit" value="Click to edit this Panel" />
</div>
then I have:
$("#button").click(function() {
dividediting = $("#button").closest("div[id^='upd']").attr("id");
alert(dividediting);
});
Try this:
$(".button").click(function() {
var dividediting = $(this).parent().attr('id');
alert(dividediting);
});
You cannot have two items with the same id - you have to be using a class not the same id on each button.
You need a .class selector for your buttons instead, like this:
$(".button").click(function() {
dividediting = $(this).closest("div[id^='upd']").attr("id");
alert(dividediting);
});
#button is an #ID selector that searches for an id="button" instead of a class="button" like you want. Also you want $(this) inside the handler, so you're getting the closest <div> of the clicked element, not the first matched .button element.
first of all, why are you using $("#button") i didn't see any id="button" in your DOM, secondly, you can use this
var dividediting = $(".button").parent().attr("id");
alert(dividediting);

Categories

Resources