/    Sign up×
Community /Pin to ProfileBookmark

Possible to copy and paste a LINK via JavaScript?

I’m trying to submit data to a database and can only do it from certain HTML elements, not things like Divs, paragraph elements, etc. So I’ve tried:

-Copying paragraph element content to a textbox, which includes the code with it, making it look not so aesthetically pleasing.

-Tried a hidden input type on the recommendation of others, and what I saw after some googling, however; this just passed the same html code along with the link and submitted the same as a textbox, which I kind of expected, though I was told that the hidden input type would solve the problem, I’m not sure how it would since it just seems to be an invisible textbox.

-I’ve tried using the below variables to pass the link to the textbox without the visible HTML included in it, and although it passess the text without the HTML, of course the link doesn’t work, it’s just plain text from the link, but not an actual link.

So that brings me to, is there a way to copy and paste a LINK from one element to a textbox? I looked around online but didn’t see anything.

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@lenovoauthorDec 28.2015 — Forgot to include function in question.

function copyText() {

var output = document.getElementById("paragraphitems").innerHTML;

var regex = /(<([^>]+)>)/ig

var result = output.replace(regex, "");

document.getElementById("TextBox1").value = result;

document.getElementById("TextBox2").value = result;

document.getElementById("contentsent").value = result;

}
[/QUOTE]
Copy linkTweet thisAlerts:
@Kevin2Dec 28.2015 — [code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find/display link</title>
</head>
<body>
<div id="div1">lorem ipsum <a href="http://www.google.com">Google</a>.<br>
lorem ipsum <a href="http://www.bing.com">Bing</a>.</div>

<button onclick="copyText(div1,result)">click</button><br><br>
<textarea id="result"></textarea>

<script>
function copyText(el,r) {
var f = el.querySelectorAll('a');
for(var i = 0; i < f.length; i++){
var txt = f[i].textContent,
lnk = f[i].href;
r.value += '<a href="' + lnk + '">' + txt + '</a> ';
}
}
</script>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@SempervivumDec 28.2015 — Is this a crossposting? I remember the same question in a different forum.
Copy linkTweet thisAlerts:
@Kevin2Dec 29.2015 — This may be a cross-post but it's also a continuation of [B]this thread[/B].

So this started out as (paraphrased) "I need to copy the contents of a DIV into an input to be inserted in my database."

OK, fine, here's some example code.

"But I don't want any HTML to be included"

OK, fine, here's some example code.

"Well, it's an RSS feed"

OK, fine, research blah blah.

Now it's:

"I need to pull a link from a DIV"

OK, fine, here's some example code.

The OP really needs to provide answers to the following:

What really needs to be submitted to the database?

What will OP do with that data?

Why does this need to occur client-side and not server-side?

Look, a "link" consists of 2 things:

1) A set of <a>nchor tags with a [B]href[/B] attribute containing the URL and/or target of the link.

2) Text or another element (<img> for example) contained within the <a></a> tagset.

Without either of those you don't have a "link". So what do you want???
Copy linkTweet thisAlerts:
@lenovoauthorDec 29.2015 — This may be a cross-post but it's also a continuation of [B]this thread[/B].

So this started out as (paraphrased) "I need to copy the contents of a DIV into an input to be inserted in my database."

OK, fine, here's some example code.

"But I don't want any HTML to be included"

OK, fine, here's some example code.

"Well, it's an RSS feed"

OK, fine, research blah blah.

Now it's:

"I need to pull a link from a DIV"

OK, fine, here's some example code.

The OP really needs to provide answers to the following:

What really needs to be submitted to the database?

What will OP do with that data?

Why does this need to occur client-side and not server-side?

Look, a "link" consists of 2 things:

1) A set of <a>nchor tags with a [B]href[/B] attribute containing the URL and/or target of the link.

2) Text or another element (<img> for example) contained within the <a></a> tagset.

Without either of those you don't have a "link". So what do you want???[/QUOTE]


While I appreciate your assistance, I'm certainly not going to be bullied by your inaccurate comments and personal attacks.

A more accurate version of events than your "I'm better than everyone" perception of what actually happened:

I asked if div content can be submitted to a database because at the time I was only able to get it to submit after copying it to a textbox first and then submitting it. You posted a reply suggesting the hidden input, though I had googled that up and tried it prior to returning to see if anyone else had any better suggestions. I noted that this doesn't actually work since it still includes the HTML. http://www.webdeveloper.com/forum/showthread.php?351687-Can-div-contents-be-submitted-to-database

In any case, I can go on and on. But I'd rather solve this issue. Also, this solution you smugly posted, does nothing different than what I was getting before, just like the hidden input solution in another thread.

We cannot use server side solutions for this per governance policy. I usually build these back end BUT...I have to learn how to do this via front end technologies. Unfortunately, your posted solution above again, did not work any differently than what I have already been getting. It still passes the HTML along with it.

One thing I'm considering is rather than using a paragraph or div element for the output of the RSS feed, I'm going to try maybe seeing if I can replace the paragraph or div element with a text area or something.

The issue seems to largely be passing the content from a p or div element to a textbox/text area. I cannot submit to the database otherwise. But since passing the links is turning out to be the remaining issue, why not see if I can start the content out as a textbox or text area instead of a div or paragraph?


Again, no offense Kevin, I appreciate any assistance I can get, but I'm certainly not going to be berated by a guy with a skewed perception of what I asked and what actually happened, who incidentally has not posted a single tip that has actually panned out. Your solution above for example, while fancy, doesn't do anything different than what I wrote. It still copies the HTML with it lol.
Copy linkTweet thisAlerts:
@lenovoauthorDec 29.2015 — Nope not gonna work like that either. Doesn't parse.
Copy linkTweet thisAlerts:
@Kevin2Dec 30.2015 — Is this an accurate restatement of your problem?
My page is pulling an RSS feed and displaying it in a <div> (<p>, whatever...). I need to find all the links, grab the URLs of those links, put them in a form input and send them to my database. I cannot do this server-side so this needs to be a client-side solution.[/quote]

That, in a nutshell, is what I see. Even though it took 2 threads and I don't know how many posts to finally get all that information.

If that is the case, the script I post above gives you everything you need. All you need to do is modify it to your needs. After all, it's "example code". If only the URL, delete this:
txt = f[i].textContent,
and change this line
r.value += '&lt;a href="' + lnk + '"&gt;' + txt + '&lt;/a&gt; ';
to:
r.value += lnk + ' ';
Need both the URL and the enclosed text (e.g. "Google") in different database fields? Need a separate line in your database for each URL? Well a bit more difficult since you'll probably have to modify the HTML and the script to add/write some <input>s but it's doable. How you input that data into your database is your problem.

But it's all there! What more do you want? Seriously and sincerely and trying hard to not come off as a "smug" "smarter than you" "bully", without answers to my previously posted questions, the rendered HTML to work with (or an example of same), and what exactly needs to be sent to the database it's really difficult to provide you with the exact code you want/need. All anyone can do is give you "example code" for you to modify to your requirements.

My apologies for appearing to be a "holier than thou" "bully" "smug" a-hole. I am definitely not the former 2, and did not intend to be the latter 2. Really and truly I want you to have a solution to your problem. If I can help with that, great. If not, well, I tried to the best of my limited abilities.
Copy linkTweet thisAlerts:
@kite123Jan 01.2016 — hey,I am providing you two link,check that if you get it:

-https://dzone.com/articles/definitive-guide-copying-and

-http://stackoverflow.com/questions/2026335/how-to-add-extra-info-to-copied-web-text
Copy linkTweet thisAlerts:
@lenovoauthorJan 07.2016 — Kevin2,

Thanks, I appreciate any assistance I can get on this. To answer your question, yes, that's what I'm asking. I tried the example you posted but it still copies the HTML with the content just testing it "out of the box". I presume you tried this yourself on your local machine? I wonder if it is my browser settings, but I've tried it with several browsers on different machines and it just copies the HTML like I was getting originally.

As far as separating any data to submit to separate fields in the database, I've got a way to handle that that I think will work. Basically functions that set the values of hidden input fields with the data I want for submission, if I need it to come to that.

Thing is right now the example provided still copies the text with the HTML rather than as a URL. If the example works fine copying the URL with the text in your environment but not mine, then there must be some kind of restriction in effect on my network that is blocking this.
Copy linkTweet thisAlerts:
@Kevin2Jan 07.2016 — This is the same as the previous code but with the changes I suggested recently:
[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find/display link</title>
</head>
<body>
<div id="div1">lorem ipsum <a href="http://www.google.com">Google</a>.<br>
lorem ipsum <a href="http://www.bing.com">Bing</a>.</div>

<button onclick="copyText(div1,result)">click</button><br><br>
<textarea id="result"></textarea>

<script>
function copyText(el,r) {
var f = el.querySelectorAll('a');
for(var i = 0; i < f.length; i++){
var lnk = f[i].href;
r.value += lnk + ' ';
}
}
</script>
</body>
</html>[/code]

Tested in Win10 with latest Chrome, latest Firefox, IE11, and Edge. It outputs just the URL(s) to the <textarea> in all of them.

[B]querySelectorAll[/B] will not work in IE8- in case that's your test browser, or if you need to support Jurassic versions of IE. See the supported browser versions here:

http://www.w3schools.com/jsref/met_document_queryselectorall.asp

As far as separating the URLs goes you could [B]split()[/B] on the space.
Copy linkTweet thisAlerts:
@lenovoauthorJan 07.2016 — That works for the URL across three browsers (IE11, FireFox, Chrome) on two machines. Original (posted below in figure 2) still adds the HTML with it. I thought that was supposed to copy the link into the textarea?

If not possible (I tried a few things but still getting the HTML with the link) then I can now at least (with the code you presented, thank you) separate the URL and the text into separate textboxes and submit to the database. That would meet my needs. I might even be able to do a calculated column that pulls the URL from a hidden text column that the URL gets submitted to so that it presents as a link via the lookup column that converts the URL into a link.

Just more curious to learn if it is possible to pass it as a link directly by modifying this. The solution posted will meet my needs and I've modified as such in figure 1:


Figure 1
[CODE]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find/display link</title>
</head>
<body>
<div id="div1">lorem ipsum <a href="http://www.google.com">Google</a>.<br>
lorem ipsum <a href="http://www.bing.com">Bing</a>.</div>

<button onclick="copyText(div1,result)">click</button><br><br>
<textarea id="result"></textarea>
<textarea id="result2"></textarea>

<script>
function copyText(el,result) {
var f = el.querySelectorAll('a');
for(var i = 0; i < f.length; i++){
var txt = f[i].textContent;
var lnk = f[i].href;
result.value += lnk + ' ';
result2.value += txt + ' ';
}
}
</script>
</body>
</html>[/CODE]



Figure 2
[CODE]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find/display link</title>
</head>
<body>
<div id="div1">lorem ipsum <a href="http://www.google.com">Google</a>.<br>
lorem ipsum <a href="http://www.bing.com">Bing</a>.</div>

<button onclick="copyText(div1,result)">click</button><br><br>
<textarea id="result"></textarea>

<script>
function copyText(el,r) {
var f = el.querySelectorAll('a');
for(var i = 0; i < f.length; i++){
var txt = f[i].textContent,
lnk = f[i].href;
r.value += '<a href="' + lnk + '">' + txt + '</a> ';
}
}
</script>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@lenovoauthorJan 07.2016 — I suppose I should ask this question here rather than posting a new thread?

What's the best way to call the submit to database function (separate script, will be sitting in a separate web part on the page in the site) when the feed changes? Should I use an on change function for the paragraph element? The div element? I don't know how often the feed updates so I don't think a timer is a solution here.
×

Success!

Help @lenovo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...