Skip to main content
A
Anonymous
January 23, 2013
Question

catch-22 - using a DIV as a form textbox

  • January 23, 2013
  • 2 replies
  • 4482 views

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?

This topic has been closed for replies.

2 replies

R
rhecker3
Inspiring
January 23, 2013

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.

A
Anonymous
January 23, 2013

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.

A
Anonymous
January 23, 2013

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.


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
Jon Fritz
Community Expert
January 23, 2013

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices