catch-22 - using a DIV as a form textbox

[Guest]

Hi All. I am in a catch 22 situation. I needed to allow users of a particular page on the internal company database i'm developing to cut and paste hyperlinks into a form textarea. Through lots of head scratching and research, i found out that wasn't possible, but the workaround was to use a div with "contenteditable" and webkit to make it look and behave like a textarea. That all works brilliantly. Now the catch-22..... now it's all done, i realize that hitting submit means the div's content is not passed along with the other POST data, so even though the id of the textarea is correct, the form processing script doesn't receive anything from that element. From searching on this site and others, i see now that div's can't be easily made into input elements.

so now i'm stuck - use a textarea and i can't have my hyperlinks. use a div and the database won't update.

anyone have a way to resonably simply get that data passed on with the rest of the form? My friends have made two suggestions :

1) use innerHTML to take the div's contents and pass it to a text element. but that saounds silly because it would then disable the links, eliminating the whole point of having the div in the first place;

2) set the div's contents into some sort of session variable on the client side using java(i am not that good with java, i'm a php guy) and fudge it when the POST is made. have no idea how that would work.

HELP me geniuses! please?

[Jon Fritz]

As far as I know, you can't use contenteditable divs in forms without adding javascript to write the info into a textarea to be passed along.

Here's a discussion at StackOverflow that touches on it...

http://stackoverflow.com/questions/7355583/can-div-with-contenteditable-true-be-passed-trough-form

Out of curiosity, why wasn't the textarea form element working for you?

If you need html formatting from the pasted material (an <a href> hiding behind a pasted text link) here's a page that shows how to gather the html from it.

http://www.quackit.com/html/codes/contenteditable.cfm

[rhecker3]

You say you found out that it's not possible to paste hyperlinks into a form textarea??? We do it all the time. So what's going on? Is it that your form validation sanitizes the hyperlink code? Then change the form validation.

[Guest]

Not sure what you're talking about. I don't just want to paste in html code.... i need it to be a clickable link. HTML code inside a textarea tag set is not rendered as HTML. I've seen it documented in about 20 different places that it is not possible to have a clickable hyperlink inside a textarea element. If you know how to do this then you are a genius and I would love to know how since that's what i wanted to do in the first place.

however, all the documentation out there all said the same thing : no can do, use a div that looks like a textarea instead.

my only goal at all is to allow users when entering text in the simple database submit form, to be able to paste a working link in amongst the other text without writing code.

[Jon Fritz]

As far as I understand it, using the contenteditable div your browser generates the HTML when one of your users pastes the link into the <div> to keep the link "clickable" within that editable region. Using some javascript (still within the form page) you take that browser generated html and place it into a hidden textarea. That hidden textarea's content  would then be what is passed on to the database when the form is submitted. It would send something along the lines of <a href="link-here.html">text here</a> to be stored. You would then write your php to create the actual clickable link in the browser from the html stored  when it's called later.

[Guest]

aha, so then passing it to the hidden textarea wouldn't necessarily destroy the link, it would just convert it to the html code itself rather than displaying it.... makes sense. now i just need to figure out the javascript to transfer the data from div to textarea (assuming something like onChange() with innerHTML??) and then when displaying how to take that code and recreate the clickable link.... i need to find a javascript expert buddy lol....

[Jon Fritz]

You might want to check out the second link I gave you before you start writing your javascript.

About half way down...

[rhecker3]

A textarea and an editable div are both trancient entities. When you close the page, whatever is in them disappears, unless you save the content and re-display it.

A textarea is a form element. After the content of the textarea is passed to a database, you call it back to your webpage--not as a textarea, but just as text.

So, like I said, I have put hyperlinks in textareas about ten thousand times over the past ten years. I think you may not understand how to work with basic form elements. You don't need javascript to solve your problem. You need to understand basic HTML and form processing.

[Jon Fritz]

I think you may not understand what the OP is asking for or you are using some code I've never heard of before.

If you can copy the word "Discussions" from above (not the link by right clicking and choosing Copy Link Location, but the word itself) and paste it into a textarea while having it maintain the html involved in the link when sent to a database, I'd love to see the code for that since it would likely make the OPs work much less involved.

[rhecker3]

Jon, he says he is cutting and pasting hyperlinks, not the "name" of the hyperlink (like Discussions), so it's actually your post I don't understand. And even so, a DIV would not be the solution.

[Jon Fritz]

I was also a bit confused by the initial request at first, but #3 above brought it into focus.

A <div> with the contenteditable attribute allows you to copy information from a web page and paste it in while retaining all of the html from the source copied. The OP wants the user to be able to copy a clickable link like "Discussions" from above and have it paste into the contenteditable <div> with the html intact, remaining clickable, then  send that info to a database.

You cannot do that with a standard textarea. If you paste anything into a standard text area, it loses it's html formatting and becomes plain text.

[rhecker3]

You cannot do that with a standard textarea. If you paste anything into a standard text area, it loses it's html formatting and becomes plain text

.

Jon, that is completely  incorrect. If you paste html, PHP or javascript into a textarea --as script-- the code is retained.

In fact, the whole premise of a content managment system is that you can paste code into a textarea. My clients paste mountains of HTML garbage into textareas that they copy from MSWord and websites. I then have ot write code to sanitize it.

So I am going to say just one more time: The textarea is NOT THE PROBLEM and a DIV is not the solution.

Anyway, I think the real problem is in what the OP is trying to do. He needs to reconsider what he wants the result to be. He's trying to get there the wrong way.

[Jon Fritz]

The way I am suggesting is illustrated here:

1. Highlight and copy the word "Discussions" from this page

2. Scroll down to "Generate the HTML Code" on this page http://www.quackit.com/html/codes/contenteditable.cfm

3. Paste the word Discussions in the sentence "Try making some of this bold or even italic" (just under the Bold and Italic form buttons)

Notice, it retains it's link (is still clickable) and also generates HTML that can be sent to a database (shown via javascript in the <textarea> just below it).

When I attempt the same thing using a standard <textarea>, I get the word Discussion and nothing more. What am I missing?

[rhecker3]

If you paste ANYTHING into a standard text area, it loses it's html formatting and becomes plain text

Jon, for the second time, this statement is completely untrue.

Paste some html code, including a link, into a textarea. The code will be retained. Now the code might get sanitized out by the form validation, but that is a different issue and a solvable problem.

You can also drag and drop the link title into a textarea, and the full link will paste in, however, this may not work in some browsers and on some webpages.

The probem is in the way you and the OP are trying to get the link into the textarea. You are not copyng the link, you are copying the link name. Copy the link instead.

[Jon Fritz]

Wow, that's just. Wow.

OP, if you run into any issues getting the contenteditable <div> and javascript up and running let me know via IM, I'd be more than happy to help you in any way I can.

[Guest]

rhecker, how do i say this as respectfully as possible?.... you're just not understanding the issue, despite both myself and Jon trying to describe it for you. Yet you're talking down to both of us as if we're morons that don't understand what YOU are saying. Jon understands the issue. you don't, and you don't seem willing to accept that. I am not trying to put CODE into a textarea, i amd trying to have RENDERED HTML LINKS (ie blue, clickable links that when clicked take you to the link). As Jon said, i need to be able to right click on an existing link and select "copy link"... (NOT simply selecting some code as you seem to think) and then right click over my textarea (or div) and hit paste and have it show as a clickable link. That DOES NOT work with a textarea. That's not opinion, it's fact - look it up if you like. It's one of the best known questions asked on most of the forums, and the answer is that textareas cannot render html elements. to do so requires a DIV. You keep saying it's doable, you've done it hundreds of times, yet you provide no examples or proof that what you say is true. If you're so convinced you're right, please by all means post some code and show us how you do it! I think you're well intentioned but you have totally misunderstood what is being attempted here.

But the larger point you're missing, is that part of the problem wasn't even my question!! That's why your comments are just clouding the issue. What I originally asked, is how to get the info inside the DIV included in my submit form so it can be sent to the database. Jon has provided what looks to be the answer on how to do it.

[rhecker3]

Thank you Toonces, well spoken.

I did not at first understand that you wanted the link to be clickable in the textarea itself. Probably because that doesn't make sense to me. You can achieve this using an iframe overlay for the textarea. Many simple CMSs use this technique. You can then toggle back and forth between code view and rendered view.

Anyway, I did misunderstand you at first. I thought you were simply saying that code pasted into the textarea would not render. I assumed the rendering was later, when the text was returned to a page. That's why I thought validation was an isuse.

But what fired me up was nothing you said, but Jon's statement that:

If you paste anything into a standard text area, it loses it's html formatting and becomes plain text

That's not true  if the actual code is pasted, dragged in or typed in. Do I really need to demonstrate this?

Sometimes what people are trying to do is something they only think they need to do. I wonder if you really do need to have the link clickable inside the textarea. Anyway, I did not think of the iframe solution yesterday. I have two files, one PHP, one JS that demonstrates this. I can put up a link of you are really interested.

I was condescending, but to Jon, not to you. Even though Jon's assertion regarding textboxes is incorrect, I apologize to him for having been harsh.

[Jon Fritz]

Wow, you still just don't understand what we were talking about.

Raw code is already unformatted text in the context of what the OP and I were discussing at that moment in time. Stop thinking about raw code, pretend raw code doesn't exist because in this situation it wasn't an option. OK? No raw code. Now, moving on...

I was specifically talking about text from the browser window, that was actively being formatted by html behind the scenes, losing that html formatting when the text, NOT THE CODE, was then pasted into a textarea. NO RAW CODE! I can sense the "but..." cropping up in your mind.

Pasting something like "<p>this is the text<p>" into a textarea OBVIOUSLY won't lose the <p></p> "formatting" since it's already plain old text as far as the browser or a textarea care. Copying the actual words from the browser window, the "Discussions" link as I kept referring to, however WILL NOT come with the <a href="..."></a> around it when pasted into a textarea tag via a simple Ctrl+C/Ctrl+V. There are more steps that need to be taken to get to the code which IS NOT what the OP was looking for.

THAT is the "formatting" I was specifically talking about being lost when pasting into a textarea and the OP understood that so we moved on.

I do take offense to your condescending attitude toward me and I find it comical that you still seem to be taking what I said completely out of context, it seems  intentional. It feels like you are mad at me because I gave you a generic adhesive bandage when you were asking for a Bandaid and you're trying to prove some point nobody but you cares about.

Text, whether in the form of a sentence or a snippet of html source code will paste just fine in a textarea. There is no "formatting" to lose. Text actively being controlled by html, in this case an <a href></a> tag set, will lose that active html formatting when pasted into a textarea.

If you still think I am mistaken, please, upload a page and share a link where I can copy and paste the information as the OP  requests into a textarea and maintain the actual html formatting given to it by the browser.

If you can't, please, stop replying to this thread.

[rhecker3]

I'll be brief.

Jon, you said that "you can't paste anything into a textarea without it losing the code." And as I kept saying, that simply isn't true. Did you notice the word "anything" above? That, Jon, was your choice of words.

It really isn't clear to me why the OP can't right-click and copy the link, and it isn't clear to me why he needs the link to be clickable in the textarea. Sometimes people think they need to do something a certain way, when they really don't.

lastly, as I suggested a few posts up, try dragging and dropping a link (the name of a link)  into a textarea. It should bring it in as HTML. This method may have some browser/doctype limitations, but many of my clients use this method with good results.

Everything I've just said, I had already said before.

[Jon Fritz]

You are amazing.

I bow down to your ability to quibble over the meaning of a word while applying the wrong context to the sentence it was taken from.

You are the master and I the student.

Bandaid good sir, Bandaid.

[rhecker3]

Glad I could help.