I can't copy value from textarea in the first click.
im working with Popup Box.
i think the problem is im hidding the .footer-result-box for textarea.
im using code like this :
HTML :
<div id="popup-box">
<div class="footer-result-box" style="height:0px">
<textarea id="final-interest"></textarea> //textarea
</div>
<button class="btn-copy-all"> COPY </button> //copy button
</div>
jQuery :
$(".btn-copy-all").click(function() {
//im use this code for get value from table when row selected.
if (states.activeScreen == "interest") {
var datas = new_tabel_interest.rows(".selected").data();
}
if (states.activeScreen == "related") {
var datas = new_tabel_page_interest.rows(".selected").data();
}
res = "";
for (i = 0; i < datas.length; i++) {
if (res != "") res += ",";
res += datas[i][2];
}
//EXECUTE
$("#final-interest").val(res); //texarea get value from selected row
$(".footer-result-box").animate({
height: "205px"
}); //display box
$("#final-interest").select(); //select textarea value
document.execCommand('copy'); //copy the result
$("#popup-box").css({
display: "none"
}); //close popup-box
alert("Copied!");
});
The code running well, but the result not copied.
My Goal :
Success copy textarea value then close the #popup-box.
Textarea Value will get DATA from Table when im select the row table.
Related
I am creating a table with an auto numbering ID column. I want to be able to have my input text field to auto-generate an ID number(when the user starts typing into the name input field).
How do I auto-generate a number into an input field?
You could use the code below. What it does is every time you click the insert button, it adds a number to the id of the item (the number next to the text field).
This code uses document.getElementById() to modify all of the elements, and uses a variable num to incremement the id value. The part where it adds the item to the list is optional - I just added it to make it look more realistic.
var num = 1;
var input = document.getElementById('item');
var p = document.getElementById('number');
var list = document.getElementById('list');
var button = document.getElementById('insert');
button.addEventListener('click', function() {
num++;
p.innerHTML = num;
list.innerHTML += "<li>" + input.value + "</li>";
});
#item {
display: inline;
}
#number {
display: inline;
margin-right: 10px;
}
<p id='number'>1</p>
<input type='text' id='item' />
<button id='insert'>Insert</button>
<ul id='list'>
</ul>
If you have an HTML table, then you could respond to all edits, listening to the input event, and decide whether to fill a unique number (or wipe it out).
Here is a generic function you could call which takes as argument the table element that should have this feature, and the number of the column that should get these ID values.
Example:
function autoId(table, colNo) {
table.addEventListener("input", function(e) {
const tr = e.target.closest("tr");
const idInput = tr.cells[colNo].querySelector("input");
for (const input of tr.querySelectorAll("input")) {
hasData = input.value.trim() !== "" && input !== idInput;
if (hasData) break;
}
if (hasData && idInput.value.trim() === "") {
idInput.value = (Math.max(...Array.from(
table.querySelectorAll("td:nth-child(" + (colNo+1) + ") input"),
input => +input.value
).filter(v => !isNaN(v))) || 0) + 1;
} else if (!hasData && idInput.value.trim() !== "") {
idInput.value = "";
}
});
}
const table = document.querySelector("table");
// Call the function passing it the table and the column that has the ID -- that's all
autoId(table, 0);
// Let's give user the possibility to add rows, using the first data row as template
document.querySelector("#btnAddRow").addEventListener("click", () => {
table.insertAdjacentHTML("beforeend", table.rows[1].innerHTML);
});
<table>
<tr><th>ID</th><th>Name</th></tr>
<tr><td><input size="2"></td><td><input></td></tr>
</table>
<button id="btnAddRow">Add row</button>
Every time a selection is made from a dropdown menu, specific data is pulled from facebook and added to different divs. I am trying to update the contents of the div every time a different selection is made, however at the minute, the contents are just appended on after the initial contents.
This is the code that gets data based on a selection and creates the list from the returned data
<script>
city = document.getElementById("citySelection")
city.addEventListener("change", function() {
var selected = this.value;
var eventsList = document.getElementById("events");
if (selected == "None") {
eventsList.style.display = "none";
} else {
eventsList.style.display = "block";
};
if (selected == 'Bristol') {
getBristolEvents();
};
if (selected == 'Leeds') {
getLeedsEvents();
};
if (selected == 'Manchester') {
getManchesterEvents();
};
if (selected == 'Newcastle') {
getNewcastleEvents();
};
});
function createList(response, listId) {
var list = document.createElement('UL')
for (var i = 0; i < 10; i++) {
var events = response.data[i].name
var node = document.createElement('LI');
var textNode = document.createTextNode(events);
node.appendChild(textNode);
list.appendChild(node)
listId.appendChild(list);
}};
</script
This is the div being targeted:
<html>
<div id="events" style="display: none">
<div id="eventsDiv" style="display: block">
<div id="eventsListOne">
<h3 id='headerOne'></h3>
</div>
<div id="eventsListTwo">
<h3 id='headerTwo'></h3>
</div>
<div id="eventsListThree">
<h3 id='headerThree'></h3>
</div>
</div>
</div>
</div>
</html>
I have tried resetting the innerHtml of the div every time the function to get the data from facebook is called:
<script>
function getEventsThree(fbUrl, title) {
var listId = document.getElementById('eventsListThree');
var headerThree = document.getElementById('headerThree');
listId.innerHtml = "";
headerThree.append(title)
FB.api(
fbUrl,
'GET', {
access_token
},
function(response) {
listId.innerHtml = createList(response, listId)
}
)};
</script>
However, that still doesn't reset the contents of the div.
I've looked at other response but they all use jquery which I am not using.
Can anyone advise on the best way to fix this? Thanks.
I think your Hennessy approach is fine. Generate the inner content, then set .innerHTML.
At least one of your problems, maybe the only one, appears to be that you set .innerHTML to the return value of createList, but that function does not return anything.
Pretty simple script but somehow it does not work. I have a text area and a button. The javascript creates an array from textarea text, which i want to use to another text fields. The thing is, that the script generates the array just only first time after page reload. The same value is displayed even if you change the text in the textarea. Any solution?
<textarea id="rev">TESTING...</textarea>
<div id="test"></div>
<button id="button" onclick="createArr()">button</button>
function createArr() {
var arr = new Array();
var txt = $('#rev').html();
$.each(txt.split('\n'), function (i, value) {
if (value != "") {
arr.push(value);
}
});
$("#firstname1").text(arr[0]);
}
function createArr() {
var arr = new Array();
var txt = $('#rev').val();
$.each(txt.split('\n'), function (i, value) {
if (value != "") {
arr.push(value);
}
});
$("#firstname1").text(arr);
}
I have a simple form: https://jsfiddle.net/skootsa/8j0ycvsp/6/
<div class='field'>
<input placeholder='Nickname' type='text'>
</div>
<div class='field'>
<input placeholder='Age' type='text'>
</div>
How would I get a button that copied the contents of each input box + the "placeholder" attribute (or class name)? So that the clipboard results looked like this:
Nickname: Johnnyboy
Age: 22
You need to:
create an invisible element to copy the data
get the data from your form and set it to the previous element
select it
call document.execCommand('copy') to copy the selected text to the
clipboard
I have updated your fiddle, check it out https://jsfiddle.net/8j0ycvsp/9/
In case you want the code
function copyToClipboard() {
/*get inputs from form */
var inputs = document.querySelectorAll("#the-form input[type=text]");
/*do a copy of placeholder and contents*/
var clipboardText = ''
for (var i = 0, input; input = inputs[i++];) {
clipboardText += input.placeholder+': '+(input.value ? input.value : '' )+'\n';
}
/*create hidden textarea with the content and select it*/
var clipboard = document.createElement("textarea");
clipboard.style.height = 0;
clipboard.style.width = 0;
clipboard.value = clipboardText;
document.body.appendChild(clipboard);
clipboard.select();
console.log(clipboard.value);
/*do a copy fren*/
try {
if(document.execCommand('copy'))
console.log('Much succes, wow!');
else
console.log('Very fail, wow!');
} catch (err) {
console.log('Heckin concern, unable to copy');
}
}
So give it a try
var input = document.querySelectorAll('.field input');
document.getElementById('submit').addEventListener('click', function () {
var innerHTMLText = "";
for (var i = 0; i < input.length; i++) {
innerHTMLText += input[i].placeholder + ':' + input[i].value + ' ';
}
console.log(innerHTMLText);
document.getElementsByClassName('bix')[0].innerHTML = innerHTMLText;
});
I have an input box storing various texts into an array and it is displaying on another page, but I want the page to say "No Events" when there is no value in the array
here is the javascript that appends the array to the page
function getEvents(){
//get the localstorage from the new event page
events = JSON.parse(localStorage.getItem("events"));
for (var i = 0; i < events.length; i++)
{
if (events === "undefined" || null || "") {
document.getElementById("none").innerHTML = "No events";
} else {
// title output
var title = document.createElement("h1"); //creates h1 element
var titleText = document.createTextNode(events[i].name); //assigns title
text
title.appendChild(titleText); //appends text to h1
document.getElementById("output").appendChild(title); //appends to the
page
// date output
var date = document.createElement("p"); //creates p element
var dateText = document.createTextNode(events[i].date); //assigns date
text
date.appendChild(dateText); //appends text to p
document.getElementById("output").appendChild(date); //appends to the page
}
}
}
And here is the html on the event loader page
<body onload="getEvents()">
<!-- Title -->
<center>
<h1>My Events</h1>
</center>
<p id="none"></p>
<div id="output">
</div>
</body>
You are looping through the array so you should test on the array elements not the array itself. Your for loop won't even run if there is no array. So the if that runs tests on the array itself under the scope of the loop has basically no sense.
You can proceed this way just before going beneath the loop:
if (events.length == 0)
document.getElementById("none").innerHTML = "No events";
Take your if statement out of the for loop
Use proper syntax for the OR clauses
properly test for undefined
Also test for length == 0
if (toString.call(events) == "undefined" || events.length == 0) {
document.getElementById("none").innerHTML = "No events";
} else {
for(){/*...*/}
}