Web app input form, no <br/> in description

[Peter · Genie Corp.]

Hi Guys

I need a bit of help, and i need some JS to solve it, but haven't found the solution yet.

I have made a guestbook with web apps for a client, it all works fine, but i have a small issue.

If the user inputs:

Hi xxxxxxx

Thank you for your help yesterday

Best regards

xxxxxxx

When it is displayed it removes the line breaks so it looks like this:

Hi xxxxxxx Thank you for your help yesterday Best regards xxxxxxx

Any good way to have it displayed as it was entered so my client don't need to manually edit the inputs

Best regards

Peter

[Peter · Genie Corp.]

I found this script which works, anyone who can edit it?

<script type='text/javascript'>

function replaceNewlines(e) {

   var element = document.getElementById('ItemDescription');

   if (e.keyCode == 13) {

      element.value = element.value.replace("\r", "");

      element.value += "___NEWLINE___\n";

      element.value = element.value.replace("___NEWLINE___\n", "<br />");

   }

}

</script>

This sort of works but it is not very pretty, because every time a user hits enter, it display <br/> and i think it would confuse users.

So when i use it it will display:

Hi xxxxxxx<br/>

<br/>

Thank you for your help yesterday<br/>

<br/>

Best regards<br/>

xxxxxxx

I want a script which does exactly this but first when the form is submitted?!

[thetrickster888]

Do you have a URL of the page you are including your form... I'll be able to work something up for you quickly... it's pretty easy with some RegEx javascript.  The key is to make a function that does this and then call that script inside your "checkWholeForm" function that BC adds when you insert a form so that the user hits submit, it passes BC's validation through the CheckWholeForm function and just before that function actually submits the form you call your function that replaces the HTML.  I'll work up a simpler and more robust solution for you, just give me the URL so I can see what you're working with.

[thetrickster888]

Ok-- I worked something up. I'm assuming your web form has the "checkWholeForm" function and that you have jQuery loaded in the HEAD of your html page or page template.  Check it out at: http://jsfiddle.net/thetrickster/JvDWA/  Let me know if you have any problems.

[Peter · Genie Corp.]

@ thetrickster888

THANK YOU!!!

Exactly what i needed, works PERFECTLY!
Thanks a lot!

@ Cedric

That sounds interesting, i could use that for other things aswell, do you have more info on that?

[cedric1]

Hi Peter,

I think this might only work on the {tag_description} field as on admin it is using WYSWIG, so the logic should be the front-end can be a WYSWIG as well.

The most common WYSWIG should be http://www.tinymce.com/

This should work well with customer submitted webapps where they can style their description fields the way they like.

[Liz-Bord]

I tried to add the tinymce to my input fields on a web app edit form, and it's not showing up at all.  Any one get this to work succesfully?

[thetrickster888]

Tiny MCE is really easy to install - make sure you've referenced this script in your HEAD element:

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>

Then, just add a class to your textarea in your web app edit layout... a class like "tinymce".  Then, in your head element, add this script after the line above:

<script>
        tinymce.init({selector:'.tinymce'});
</script>

Are you seeing any errors in your javascript console?  If you hit Ctrl-Shift-J or Cmd-Shift-J in Google Chrome do you see any red error messages? If so, what are they?

[Liz-Bord]

Got it to work, thanks... didn't have the jquery loading... thought it was included in the tinymce js file.

How about uploading photos?  The related image upload tools seem to need php or asp to operate...

Would like the user to be able to add photos to the content if they want.

Is there any way to reference BC's wyswig editing tool on the web app front end input form?  That has the hooks for accessing photos, page links, etc.

[cedric1]

Hi,

Best to convert your multiline field to WYSIWYG, there are some javascript to do this by specifying an ID to your textarea and switch it to WYSWIG

Hope this help

Cedric