How to add id attribute of an element in HTML as a variable which is declared above in javascript.
jQuery
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)').html('<button type="button" id="what to write here" class ="save_db")>save</button> ');
I want to set id as name.
Thanks
It can be done using simple string concatenation as follows:
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)')
.html('<button type="button" id="'+name+'" class ="save_db">save</button> ');
PS: Also note that your markup contained a seemingly unnecessary closing brace after class attribute. I've removed it in my code.
So you just want a variable inserted into the html string?
table_row.find('td:nth-child(6)').html`(
'<button type="button" id="' + name + '" class ="save_db">save</button> '
)`;
Concatenate name variable to the appending string as ID.
table_row.find('td:nth-child(6)').html('<button type="button" id="'+ name + '"
class ="save_db")>save</button>');
Please follow this code:
table_row.setAttribute("id", "id_you_like");
Please try with the below code snippet.
Let me know if i am not understand your question.
var id = "btn1";
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)').html('<button type="button" id="'+id+'" class ="save_db")>save</button> ');
Have you tried this? Try using this:
<button type="button" id='"+name+"' class= "save_db">
Related
I have only started to learn JS and I'm a bit stuck.
So I have an HTML code + JS to change the value but it doesn't work and I have no idea why... Thanks for help ^^
<p class="username">T</p>
<input type="text" class="usernameValue">
<button onclick="usernameChange()">Change</button>
function usernameChange(){
var usernameValue = document.querySelector('.usernameValue').value;
var username = document.querySelector('.username').innerHTML;
username = usernameValue;
}
Oh I'm so dumb, thanks everyone for the help
username is not a reference to the actual string. If you want to change the innerHTML of the element with class username you need to explicitly say so
document.querySelector('.username').innerHTML = usernameValue;
Also, you have a typo in your html. It should be onclick, not onlick.
You are assigning the one string to another, it doesn't update the element's innerHTML, you need to do
document.querySelector('.username').innerHTML = usernameValue ;
You also need to change onlick to onclick, refer to the demo below.
Demo
function usernameChange(){
var usernameValue = document.querySelector('.usernameValue').value;
document.querySelector('.username').innerHTML = usernameValue;
}
<p class="username" id="username">T</p>
<input type="text" class="usernameValue">
<button onclick="usernameChange()">Change</button>
There doesn't appear to be a div with a class of username, so add that if it's not in your code.
You misspelled onclick inside of <button onclick="usernameChange()">Change</button>
You'll also want to capture the element itself rather than a reference to innerHTML, and then set the element's innerHTML to your value.
var username = document.querySelector('.username');
username.innerHTML = usernameValue;
function usernameChange(){
var usernameValue = document.querySelector('.usernameValue').value;
var username = document.querySelector('.username');
username.innerHTML = usernameValue;
}
<div class="username"></div>
<input type="text" class="usernameValue">
<button onclick="usernameChange()">Change</button>
It's supposed to be <button onclick="usernameChange()">Change</button> not <button onlick="usernameChange()">Change</button>
I have this text
var test = "<span data-toggle="tooltip" title="2Test">1TEST</span>";
I don't rely not sure what I am doing and could need some help. This is what I tried:
test = test.replace(/<span data-toggle="tooltip" title="|">[^>]*>/gi, "");
The test variable should only return the value inside of "title".
I agree with #Biffen you shouldn't really parse HTML with regex! But if you must do it, try this...
var test = "<span data-toggle='tooltip' title='2Test'>1TEST</span>";
var result = test.match(/title='([^']+)'/)[1];
console.log(result); //2Test
You don't need to parse HTML to get the title attribute, instead you can access title attribute from HTML DOM.
Create a temporary container with createElement, then set inner html with your html string, lastly traverse to first child which is the span and get the title attribute that you want.
Example:
var test = "<span data-toggle='tooltip' title='2Test'>1TEST</span>";
var el = document.createElement('div');
el.innerHTML = test;
var title = el.firstChild.getAttribute('title')
console.log(title) //2Test
I wanna know if it's possible do something like this:
In HTML I have:
<input type="hidden" value="{{productName}}" id="{{productId}}">
<button type="button" class="buyProduct" value="{{productId}}">Buy</button>
In Javascript (Meteor) I wanna do:
Template.productsList.events({
click .buyProduct: function(event, template){
var idGeneratedByBtnClick = event.target.value;
console.log(idGeneratedByBtnClick); // it shows the correct ID for each button
var element = template.find('input:hidden[id='idGeneratedByBtnClick']');
});
Can i use a variable like this: input:hidden[id='My Variable here'] ???
Thanks
I think it's available to use the variable as string.
Could you try?
var idGeneratedByBtnClick = event.target.value;
var element = template.find('input:hidden[id=' + idGeneratedByBtnClick + ']');
I have commas between my HTML buttons and i don't know where they come from.
The div in which i create the buttons is empty before the buttons are being created.
In my JavaScript, i don't have any commas that could be put between the buttons as you can see below.
Here is a picture:
I create the buttons with JavaScript like so:
var f = "'";
contents[0]='<button class="btn" onclick="check('+ f + randomChar0 + f +');">' + randomChar0 + '</Button>';
contents[1]='<button class="btn" onclick="check('+ f + randomChar1 + f +');">' + randomChar1 + '</Button>';
contents[2]='<button class="btn" onclick="check('+ f + randomChar2 + f +');">' + randomChar2 + '</Button>';
ranNum0 = randomize(2);
document.getElementById("response").innerHTML = contents;
My HTML looks like this before i insert the buttons:
<div id="response" class="center-children">
</div>
And like this after i insert the buttons:
<div id="response" class="center-children">
<button class="btn" onclick="check('B');">B</button>,
<button class="btn" onclick="check('S');">S</button>,
<button class="btn" onclick="check('E');">E</button>
</div>
If i check in the Browser, it looks like this:
I checked my whole JavaScript, even tried to delete all the CSS and HTML but the commas remain there...
Does anyone have a clue what might cause this?
The problem is that you are assigning the string value of your array to .innerHTML and the string value of an array has commas between the elements.
In order to combine the values in your array, use .join():
document.getElementById("response").innerHTML = contents.join('');
Or better yet, don't use string manipulation to create DOM elements.
You're setting innerHTML to be an array, but it's supposed to be a string. Implicitly, .toString() is being called on your array, which leaves commas. Try it out, [1,2,3].toString() evaluates to "1,2,3".
Take the following page with two forms with different classes but each form has an input with the same name.
<form class='first_form'>
<input name='test' value='1' />
</form>
<form class='second_form'>
<input name='test' value='3'/>
</form>
I can get the form index and I know the name of the input but I do not know the index of the input.
Is there a way to chain a selector with the form index and the input name to get the value?
I have tried chaining but nothing seems to work
var inputName = 'test';
Var formIndex = 1;
$('*[name="' + inputName + '"]' +' ' + '$("form").eq(' + formIndex + ')').val();
FIDDLE
var formIndex=0;
var inputName="txtbox";
vall= $("form:eq("+ formIndex+") input[name= "+ inputName +" ]").val();
alert(vall);
your order was wrong
Untested, but could you do:
$('form:nth-of-type(1) input[name="test"]').val();
$("form:nth-child("+formIndex+") input[name='"+inputName+"']").val();
You could do in a more clever way:
var fieldName = 'test';
var formId = '.first_form'
$('form'+formId+' input[name='+fieldName+']).val()
Instead of index, use named selectors, like id or class. It will help you in the future find the correct form (when you will have more than 5, it will be hard to count witch one you are looking at :) )
But that is too complex:)
I would propose something like this:
var currentForm = $('form'+formId);
currentForm//here you can put a log into console if element has not been found and find that bug sooner.
currentForm.find('input[name='+fieldName+']').val()
You can access the form's element directly within the DOM using either of:
document.forms[formIndex]
document.forms[formName]
You can then reference an input element by name using:
document.forms[formIndex][inputName]
document.forms[formName][inputName]
Then just wrap it in $(...) to get yourself a jQuery collection. In your case:
var inputName = 'test',
formIndex = 1;
$(document.forms[formIndex][inputName]);
I imagine this is by far the most performant way, and it's readable too.
To add a little detail, document.forms is an HTMLCollection of all HTMLFormElements within a document. And given any HTMLCollection or HTMLFormElement you can access named elements within them as properties.