<td><input type="submit" id="view_{{ var }}" value="View"></td><td>
I need to catch this id pattern. I have multiple submit button in the table. Whose id are variable but having a common pattern. On clicking each submit button the first and second <td> value of same row should be selected.
You can use the Attribute Starts With selector:
$('input[id^="view_"]')
I'd place a .delegate() handler on the <table>, with a selector to match the submit inputs.
$('#myTable').delegate(':submit', 'click', function() {
var id_value = this.id.split('_')[1];
alert( id_value );
// and so on
});
If there are other <input type='submit' /> elements in the table, then you could use a more specific selector to target only those.
Try this:
var a = $('input[id^="view_"]');
var id = a.attr("id").replace("view_", "");
Related
I want to show the value of the first input box when I click on first delete link and show the value of the second input box when I click on the second delete link by with using the same id but it is always sending the first delete link's value.
function delChat() {
var id = document.getElementById('delmsg').value;
alert(id);
}
Delete?
<input type="hidden" value="1352" id="delmsg" >
<br />
Delete?
<input type="hidden" value="1350" id="delmsg" >
You can not use same id's for two different elements. Every element on a page should have unique id.
But if you can not change the id, then you should get the attribute this way:
function delChat(el) {
console.log(el.getAttribute('value') + " clicked");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'delete.php?id='+el.getAttribute('value'), true);
xmlhttp.send();
}
Delete?
<br />
Delete?
ids have to be unique. The best alternative is to use a class and attach event listeners to each element. You can use this in the function called by the event listener to point to the element that was clicked. Also value isn't a valid attribute of a so use a data attribute instead: data-value - the values of data attributes can be accessed through the element's dataset object.
function delChat() {
var id = this.dataset.value;
console.log(id);
}
const buttons = document.querySelectorAll('.del');
buttons.forEach(button => button.addEventListener('click', delChat, false));
Delete?
<br />
Delete?
could stop using id for these cases, it would be enough just to pass the element that was clicked as a parameter for the function both in the html with the reserved word this and in the js, to get the value attribute you can use getAttribute ('value')
function delChat(el) {
let id = el.getAttribute('value');
console.log(id);
}
Delete?
<br />
Delete?
to have a more manageable code, it would be ideal to add the function from JS and not use in the HTML, but it would be necessary to add a class to reference them (linkdel)
function delChat() {
let id = this.getAttribute('value');
console.log(id);
}
var links = document.querySelectorAll('.linkdel');
links.forEach(function(el){
el.addEventListener('click',delChat,false);
})
Delete?
<br />
Delete?
I have html elements as:
<input type=hidden class=txtCustomerId value=".parent::current()." />";
<input type=button class=printToTextarea value='Get to box' />
and jquery:
$(".printToTextarea").on("click", function () {
var array = $('.txtCustomerId').map(function() {
return this.value;
}).get();
loadxmldoc(array);
});
It passing all elements as array from hidden field with class name txtCustomerId while I need only current element when button click. Button is also array and both should have same index.
The following code using eq() and index() meet the requirement at much extent.
$(".printToTextarea").on("click", function () {
var i = $('.printToTextarea').index(this);
var custid=$('.txtCustomerId').eq(i).val();
loadxmldoc(custid);
$("#textInput").focus();
});
Change:
$('.txtCustomerId')
to:
$(this).prev('.txtCustomerId')
Well you are selecting all of the elements. So you need to select the one that is related. With your example, you would use prev() to get a reference to the element.
$(".printToTextarea").on("click", function () {
var button = $(this);
var inputValue = button.prev(".txtCustomerId").val();
console.log(inputValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=hidden class=txtCustomerId value="hello" />
<input type=button class=printToTextarea value='Get to box' />
But how you get the input really depends on your HTML. So if the structure is different than the two elements beside each other, than the way to select it would change.
I want the value of last textbox to be grabbed by the varialble on multiple textbox with same ID.
HTML
<input type="text" id="get"><br>
<input type="text" id="get"><br>
<button id="grab">Click</button><br>
SCRIPT
$("#grab").click(function(){
var value = $("#get").val();
});
Or, a way to delete the first textbox might also work. Working Example
Your HTML is invalid: HTML elements can't have the same id attribute.
Use the class attribute, instead.
You can then use .last() to get the last element that matches the .get selector:
$("#grab").click(function(){
var value = $(".get").last().val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="get" value="foo"><br>
<input type="text" class="get" value="bar"><br>
<button id="grab">Click</button><br>
(I added the value attributes for demonstrative purposes. Obviously, they can be removed.)
If you want to get the first element's value if the second one is empty, you could do this:
$("#grab").click(function(){
var firstValue = $(".get").val(); // `.val()` gets the first element's value by default
var secondValue = $(".get").last().val();
var result = secondValue || firstValue;
alert(result);
});
If you don't have any control on ids you should use following solution. If you can change the ids you should change them.
You approach will not work because the id is not unique. It will always get the first input.
$("#grab").click(function() {
// var value = $(this).prev("input").val(); // Will work when there is no `<br>`
alert($('input[id="get"]').last().val());
});
Here $('input[id="get"]') will get all the elements having id get and last() will get the last element from it.
Demo: https://jsfiddle.net/orghoLzg/1/
Very new to JavaScript/HTML, help!
I have 2 text boxes and a submit button. I am trying to retrieve the data from each of them using JavaScript and for the time being, simply put them into an alert box.
However, on clicking the button, the alert just reads 'undefined', help!
Here's a code snippet:
function submitApp() {
var authValue = document.getElementsByName("appAuthor").value;
var titleValue = document.getElementsByName("appTitle").value;
alert(authValue);
}
<input type="text" name="appAuthor" size="" maxlength="30" />
<input type="text" name="appTitle" maxlength="30" />
<input type="button" value="Submit my Application!" onclick="submitApp()" />
getElementsByName() returns a list. So you can grab the first item in the list:
document.getElementsByName("appAuthor")[0].value
.getElementsByName() method returns an array-like node list, so you'll need to specify an index in order to retrieve a specific input's value (because the value property only applies to DOM elements, not an entire list).
function submitApp() {
var authValue = document.getElementsByName("appAuthor")[0].value;
var titleValue = document.getElementsByName("appTitle")[0].value;
alert(authValue);
}
Just add this jQuery to a document.ready section like this:
$(document).ready(function() {
$('#submit').on('submit', function(e) {
e.preventDefault();
submitApp();
});
function submitApp() {
var authValue = document.getElementsByName("appAuthor")[0].value;
var titleValue = document.getElementsByName("appTitle")[0].value;
alert(authValue);
}
});
<input type="submit" id="submit" value="Submit my Application!">
If you want to submit the form remove the e.preventDefault();, but if you just want the value updated keep it in there to prevent form submition.
You could potentially change the button type into a submit-type and do something like this:
$('body').find('form').on('submit', function(e){
e.preventDefault();
var authValue = $('input[name="appAuthor"]').val();
var titleValue = $('input[name="appTitle"]').val();
//...here do whatever you like with that information
//Below empty the input
$('input').val('');
})
Or just interpret the form as an array to make your life easier and clean the code up.
When you use getElementsByName or getElementsByClassName, it returns array of elements, so you should put index to access each element.
authValue = document.getElementsByName("appAuthor")[0].value;
Suppose you have the following code to update many elements:
<div class='item'>
Name:<input type='text' name='name' data-id='123' value='Name 1'>
<button class='update'>update</button>
</div>
<div class='item'>
Name:<input type='text' name='name' data-id='456' value='Name 2'>
<button class='update'>update</button>
</div>
And JavaScript to handle the update:
function updateName(name, id){
...
}
What is the jQuery handler that can find the value and id and call updateName?
$('button.update').click(function() {
name = ?
id = ?
updateName(name, id)
}
EDIT:
The expected behavior is that when the user updates the input field, the updated value is sent to updateName(), not the original value.
Also, note that the data-id and value are on the input, not the button.
http://jsfiddle.net/e3g6nfc1/8/
Inside event handlers this is the unwrapped DOM element
$('button.update').click(function() {
var name = this.name
var id = $(this).data('id');
updateName(name, id)
}
note that you want var in this case or else name and id jump out of the scope of that function and possibly become global variables.
I've argued before that this is awkward and bad to use. You can achieve the same effect without using it like so:
$('button.update').click(function(e) {
var name = e.currentTarget.name
var id = $(e.currentTarget).data('id');
updateName(name, id)
}
You also don't have to use jquery for data. on reasonably modern browsers $(domElement).data('foo') is equivalent to domElement.dataset['foo']
Edit: Not sure if I missed this in the question or if it got edited but it seems like you're asking not for attributes on the button but the element before it. In that case you want $.fn.prev which will look something like this
$('button.update').click(function(e) {
var $prev = $(e.currentTarget).prev();
updateName($prev.name, $prev.data('id'))
}
note that this assumes that the input element is directly before the button. If you want to find the closest preceding input element you would use $.fn.prevAll
var $prev = $(e.currentTarget).prevAll('input').last();
Like this:
$('button.update').click(function() {
name = $(this).attr('name');//to get value of name attribute
id = $(this).data('id'); // to get value of attribute data-id
updateName(name, id)
}
You may also use prop() method to get name or data-id:
name = $(this).prop('name');
id = $(this).prop('data-id');
But best is to use data() method for data-* attribute.
Not sure why the answers here are trying to find the input attributes on the button element...
<div id="container">
<div class='item'>
Name:<input type='text' name='name' data-id='123' value='Name 1'>
<button class='update'>update</button>
</div>
<div class='item'>
Name:<input type='text' name='name' data-id='456' value='Name 2'>
<button class='update'>update</button>
</div>
</div>
Delegating the events to attach only to the container (selecting only those children with .update class), catching them as they "bubble up". previousElementSibling used to target the input but jQuery selectors could also be used to find it if the layout were more complex.
$('#container').on('click','.update',function(e) {
updateName(
e.currentTarget.previousElementSibling.name,
$(e.currentTarget.previousElementSibling).data('id')
);
});
JSFiddle