nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Textareas and javascript

cunnins4

Hi guys,

following on from my thread about "web page using ms word" i've since learned a bit of javascript and my form's come a long way and I now have it processing all the data i need and submitting as an email to myself and i then use a macro in excel to import the data into my spreadsheet.

Everything is fine except for one problem- i have 3 fields which require large textareas for applicants to fill out an entire section and they use line spaces between paragraphs etc.... When i import the data unfortunately the linespaces and new lines the applicant use appear as a new line in the submitted email so when i import the data into excel, everything gets a little messed up on me.

That's probably a little hard to explain so i'll try to show you some of the code:

<textarea rows="5" cols="35" name="text1">

then if the user fills out text1 with the following:

This is the first line. Then they type a few more lines.

Then hit return a couple of times to make there stuff a little more presentable. Blah blah blah, purple monkey dishwasher.

in my import the data comes out like this:

text1=This is the first line. Then the type a few more lines.

Then hit return a couple of times to make there stuff a little more presentable. Blah blah blah, purple monkey dishwasher.

If that makes any sense? So what i'd like to do is join up all of the lines of the input so they'll all come into the same cell in excel when i do the import so it'll look like this

text1= This is the first line. Then the type a few more lines. Then hit return a couple of times etc....

is there anyway to do that using a javascript function? I'm sorry if this has been a little unclear. I've basically learned the basics of javascript in the last couple of days, and i've only a book to guide me.

On a better note-javascript's pretty cool. It's added some nice functionality to my form and made the whole thing look more professional with prompts telling the user to input mandatory fields etc.....which i'm quite happy with.

Thanks guys.

Find more posts tagged with

Quick Links

Comments

amen

what I would do and its not nice is grab the text out of the textarea just before you post and remove all the new line characters, carriage returns etc and just replace with a space so make it look nicer in excel.

I'm sure there are better ways to do this

ron_darrell

I'm with amen on this. If you don't want something to appear then remove it

Perhaps though it might be an idea to replace it with a char of some sort that can then bre replaced with the carriage returns if you ever need to send the data from excel back to your web-page (might never happen but you never know) maybe # or ^ or something that generally wouldn't be used by someone just typing. It's up to you of course and of course these chars will appear on your excel sheet and so you may not be happy with that.

-RD

cunnins4

Thanks for that guys. Ron D-i'd thought about that and it's EXACTLY what i'd like to do. Unfortunately my knowledge of JS is miniscule as I've only started learning it this week. Any chance someone could point me to a link or something that'll show me how to remove line spaces etc...?

thanks again!

Liam Byrne

Check out the "wrap" attribute for textarea....that might help without the need to do any additional coding:

http://www.idocs.com/tags/forms/_TEXTAREA_WRAP.html

cunnins4

Thanks for that. Unfortunately it's not much use to me. Soft wrap does help a little with the first line of input from the user, but as soon as they hit return (which they will do) it's knackered.

If anyone could tell me how to remove line spaces that'd be great! (no doubt it's not easy!)

daymobrew

Does your web server have PHP or perl CGI capabilities?
If so you could do all the processing on the server.

If sticking with Javascript, does your book cover regular expressions?

cunnins4

daymobrew wrote:

Does your web server have PHP or perl CGI capabilities?
If so you could do all the processing on the server.

If sticking with Javascript, does your book cover regular expressions?

Unfortunately everything is JS. I've read up loads on PHP and Perl and it's no use. It has to be JS. The book doesn't cover regular expressions either unfortunately.

TBH, the most important part of the form is fine and I can go with that. This thing has become more of a project for me to pass the last couple of weeks of my contract here. I've nothing else to do! I'd like to finish this part for myself and the experience of learning a bit of JS.

Is it possible to have several forms on the one page? but that the submit via email together? i.e have <form....>fields from the first form (no textareas) </form> then have another <form.....>second form</form> but when i click on submit the two forms submit together? that way on the first form i could have enctype="plain/text" and on the second have no enctype and when i receive the submission the line gaps will show up as %0D%0A%0D%0A%0D%0A%0D%0A so i can remove the line gaps then?

very labour intensive though!!!

ron_darrell

http://www.scriptygoddess.com/archives/2003/12/02/javascript-removing-new-lines-n-or-r-from-text/

Haven't tried the code on this page but give it a shot. I'd have to go with other posters here and say this is something more easily done with php or asp but as you have said that it has to be javascript then not much other choice

For a good tutorial on regexp try:

http://www.webreference.com/js/column5/

Best of luck
-RD

cunnins4

Okay, i got something from the reg expressions part using the replace operator.

Is there a way to change the value of a textarea before it's sent to me? I'm able to get rid of the line spaces if i write the results of .replace("\n", " ") to the browser, but not using the mailto action. Here's a sample of the code i've tried:

function test()
{

var lines=document.forms[0].elements[0].value;
var replacement=" ";
document.forms[0].elements[0].value=lines.replace("\n",replacement);

}

so if i enter

Test line one

Test line two

the browser outputs:

Test line one Test line two,

but in my submit email i get
text=Test line one

Test line two

If that makes any sense?

Thanks for the help guys!

ron_darrell

I don't know if replacing the \n will do what you are looking for as some of the returns might be \r also (confusing as hell but there are two actions for the return key it's either a line break or a carriage return - goes back to the pre-computer days of typewritters - never made much sense to me). You said this was javascript. Where is it being sent to? Javascript is client side code (in general though you can write ASP (which is a server side language) in javascript) so if this project is just javascript you shouldn't being sending it anywhere (javascript is basically stateless, i.e. you cannot store a value in one page and retrieve it in another (unless you are using cookies))

That's a lot of questions. I'll leave it at that for now.

-RD

cunnins4

Okey dokey! I'm afraid I don't really understand all that (i'm new to this stuff!)

I'll try to answer a little:

the form is being sent via email (mailto:me@myjob.ie) using action="mailto:......etc.." and method="post"

I don't want to store any data anywhere, just remove the line spaces just before it's sent to the mail server. Is that possible?

The line spaces are removed when i use the following:

var text=document.forms[0].elements[0].value;
var result=text.replace("\n"," ");
document.write(result);

the user input from the text area is displayed by the browser without any line spaces. But then using the same idea:

document.forms[0].elements[0].value=result;

doesn't work when i click submit. It doesn't remove the line spaces.

I wish I could phrase this better, but i'm very new to this.
I know these questions are very frustrating - thank you for your patience!

edit: just saw the bit about cookies-is that what i'd need?

amen

yes on the submit button
you could add an event to perform some action before
the post(send to mail server)
and depending on the result of what you do either stop the post or continue

I'm a bit vague as googleing the above ideas should give you enough to get an answer

daymobrew

cunnins4 wrote:

The line spaces are removed when i use the following:

var text=document.forms[0].elements[0].value;
var result=text.replace("\n"," ");
document.write(result);

the user input from the text area is displayed by the browser without any line spaces. But then using the same idea:

document.forms[0].elements[0].value=result;

doesn't work when i click submit. It doesn't remove the line spaces.

It sounds like there is an issue writing the modified string to the textarea.

Could you add a hidden field to your form? This field would hold the modified string. The textarea string would be submitted unmodified. I don't know if this would mess up your email when it comes to transferring the data to Excel.

cunnins4 wrote:

I've read up loads on PHP and Perl and it's no use.

Perl is super-fantastic-happy-hour brilliant for processing text. In my opinion this would simplify your task considerably. I'd be willing to write some simple code for you.

cunnins4

thanks Daymobrew, that'd be great - i'd really appreciate it man, but don't go to any trouble. I actually got it working somewhat using the following type of thing:

<html>
<title>FORM</title>
<head>

<script language="javascript">


</script>

</head>
<body>

<form enctype="text/plain" >
<textarea name="text1" rows="5" cols="25" wrap="soft"></textarea>
<input type="button" value="press me!" onClick="validate()">
</form>

</body>
</html>

but unfortunately, instead of a backspace the \b comes through as a in my email, which is no use, so what i'm going to do is indent new lines on submission so that when i do my import, excel will take them into the second column, and that makes things A LOT more managable for moi!

I've said it repeatedly to my bosses that they need our techie guys to sit down and go through all of this stuff and see what needs doing so that a universal form can be made up and re-used as this is what my dept deals with-recruitment and with that comes a hell of a lot of forms hence paper and they want it moved towards e-applications.

I've enjoyed messing with this thing though-it's gotten me through the last few weeks of a rather dull job!

Thanks for all the help guys, much appreciated!

ron_darrell

I'm more than a bit confused by how this is going from a form to an excel sheet without any kind of processing but glad you got it to work. You'll run into problems though getting this to work as a 'universal' form as some users may have javascript disabled on their machines (therefore your script won't work at all).

I'd really advise you to learn PHP or ASP if you have some free time on your hands as they are (generally) more useful than javascript (at least from a 'will I hire this person' point of view). Better still try out ASP.Net.

-RD

cunnins4

When the user clicks submit i receive an email as follows:

forename=blah
surname=blah
gender=blah blah
.
.
.
.

in outlook i click file->save as .txt and save it

in my excel spreadsheet i've recorded a macro that uses the import data wizard and opens the saved .txt file from my desktop, and imports the data onto the spreadsheet. But here's the good part-the data comes into the spreadsheet as one long column of data. I need it as a row, so i recorded a transpose function in the macro which changes it into a row of data. I assigned the macro to ctrl+q so that's all i do in my spreadsheet and the data's in. Exactly as i want it to look.

from the time i receive the email it takes all of about 4 seconds to process it and i click the mouse about 8 times or so. It's not super efficient but it works!!!

daymobrew

cunnins4 wrote:

When the user clicks submit i receive an email as follows:

forename=blah
surname=blah
gender=blah blah

I created a simple html page with a form prompting for forename, surname, gender and a message. It submits the data to a PHP script without any Javascript processing. [PHP]<pre>
<?php
echo 'forename=', $_POST, "\n";
echo 'surname=', $_POST, "\n";
echo 'gender=', $_POST, "\n";

// Change carriage returns into spaces.
$ExcelString = preg_replace( '/[\r\n]/', ' ', $_POST );
// Change multiple spaces into a single space.
$ExcelString = preg_replace( '/\s+/', ' ', $ExcelString );
echo 'text1=', $ExcelString, "\n";
?>
</pre>
[/PHP]
This produced:

forename=Bob
surname=Simple
gender=male
text1=This is my simple message it has long lines. And multiple paragraphs.

It would be easy to change this to send an email to you and display an acknowledgment to the person submitting the form.
It would also be easy to combine the PHP script and HTML form into the one file.

Of course, based on your description of what you do with the info, it sounds like a database backend (probably not difficult) would help you out a lot, but that's for when IT are feeling helpful.

cunnins4

Thanks for that daymobrew. I asked the techie guys about using php yesterday afternoon and they said that although i could use it, they won't support it and basically to f*ck off. PHP looks rather easy!

My bosses looked over what i've done and they've decided that the form isn't user friendly enough because the textareas aren't rich text-users need to be able to use bold/italics/indent etc....so that basically ends my little project! Ah well. I'm just wasting time putting in loads of popups and alerts all over the place on the original part of the form now. they're gonna use that part to capture the most important info and have the applicants submit a hard copy of the rest of the form.

Thanks for all the help guys.

Oh, and is it possible to have bold text in an alert box?

daymobrew

cunnins4 wrote:

My bosses looked over what i've done and they've decided that the form isn't user friendly enough because the textareas aren't rich text-users need to be able to use bold/italics/indent etc....so that basically ends my little project! Ah well. I'm just wasting time putting in loads of popups and alerts all over the place on the original part of the form now. they're gonna use that part to capture the most important info and have the applicants submit a hard copy of the rest of the form.

Bold/italics - are these really needed?
And hard copy?? /me cries.

cunnins4 wrote:

Oh, and is it possible to have bold text in an alert box?

Look at Yahoo! UI Library. It has a Rich Text Editor and simple dialogs that might support bold.

cunnins4

No they're not needed on my side. Unfortunately the form is an application for for a promotion. Obviously people want to be able to present their applications as best as possible - and so indenting/bullet points/bold/italics etc.... have been favoured very much in past competitions for promotioon. All well and good on a hard copy. Feckin difficult to get done on an online form, especially by a summer temp who knows zipp about html and the rest.

as for the hard copy-you have no idea of how much trouble they are man. last competition ~410 applicants (expected over 600) that's 410x5 copies each with 8-9 pages in each which is the guts of 20,000 pages of applications!!!!:eek: So i'm sure you can imagine the importance of an online application system. With each of those applications I had to sort through the pages of EACH ONE and find roughly 15 pieces of information and enter that into a spreadsheet. This took me 3-4 days, and others chipped in. This also lead to duplicate entries. More trouble.

At least with the main page that i've created, for the next competition we're running we won't have to enter those 15 pieces and we'll know EXACTLY how many applicants we have a lot sooner than usual. This in turn leads to swifter scheduling of interviews/better gender balance in interviews/quicker stats reports/ and an easier time in general.

Ultimately, the techie guys are gonna have to sit down and get a full spec of what's needed and design a system for generating a DB of ALL the information posted on a form. It must be capable of handling rich text and all the other bizarre things people want to use on these applications. It has to be easy to modify from competition to competition and all the rest. It's a huge job, but some day soon they're gonna have to do it. At the end of the process all those applications get shredded. What a bloody waste!

Thanks again for your help man. Much appreciated.

daymobrew

If nothing else, surely the applications can be submitted electronically.
That would reduce errors because you can simply copy and paste.

cunnins4 wrote:

Feckin difficult to get done on an online form, especially by a summer temp who knows zipp about html and the rest.

Is this a Civil Service workplace - giving a difficult task to someone who doesn't have the appropriate experience? (this is not a dig at you but rather at management)
You have my sympathy.

cunnins4

daymobrew wrote:

Is this a Civil Service workplace .

Bingo.

daymobrew wrote:

giving a difficult task to someone who doesn't have the appropriate experience? (this is not a dig at you but rather at management)
You have my sympathy.

No offence taken. TBH, i've quite enjoyed it. It's given me something to do in one of the most mundane jobs i've ever had. I've also got something half decent to put on my C.V. so at least I get that out of it.

They tried to get people to submit these applications via email attachment before, but that left the problem of having to print 5 copies of each anyways as the interview boards prefered to have hard copies so they could scribble notes on them.....

They're all a hard crowd to please! And with the attachment method there was still the horrible task of sifting through each application looking for the 15 or so pieces of information.

With the info I capture from the first page a hell of a lot of the nasty work is done. After that things aren't too bad. Still not ideal though.

Bluefrog

If you stored the data in CSV format in the mail you send it would be a lot easier to import it into Excel. CSV would preserve line breaks within your cell.

You can find the specs for CSV online easily.

Any problems, PM me.

amen

This took me 3-4 days, and others chipped in. This also lead to duplicate entries

this is due to lack on controls when looking at the hardcopies not the volume.
You need a completed/in progress/not completed folders that you put the hardcopies into as you work on them

better gender balance in interviews

whats that about? Are the best candidates not interviewed irrespective of Gender? Or is it the best 5 males and best 5 females even if male 6 is better than females 1-5?

Evil Phil

Bluefrog wrote:

Any problems, PM me.

Please take the time to read the forum charter before posting on the forum.

Thank you.