Input Fields to Populate a Letter

Hey everyone,

I'm extremely new to javascript and am looking for someone to steer me in the right direction

I'm trying to produce a page where users can input details into form boxes and then click a button that will generate a letter for them with the information they have inputted. I just can't seem to get it working and i'm not even sure if i'm on the right track, so if anyone has done something like this and has an example or can help me out it would be greatly appreciated.

This is what i have currently come up with:

<script type="text/javascript" language="javascript">
<!--
function writeletter()
{

recipient = document.letter.recipient.value;
sender = document.letter.sender.value;
date = document.letter.date.value;
subject = document.letter.subject.value;

if (recipient==""||sender==""||date==""||subject=="")
{alert ("Please complete all fields"); return (false);}

letterinfo = ("This letter was sent on " +date+ " by " +sender+ ". This letter is about " +subject+ " and is intended only for " +recipient+ " to read.")

document.letter.lettertext.value = (letterinfo);
}
}

function clear()
{
document.letter.lettertext.value = "";
document.letter.recipient.value="";
document.letter.sender.value="";
document.letter.date.value="";
document.letter.subject.value="";

}
//-->
</script>

Code (markup):

and:

<noscript><p>Please enable Javascript!</p></noscript>

<form name="letter" id="letter" onsubmit="return writeletter()" onreset="return clear()" action="javascript:return writeletter()" method="post">

Recipient Name:<input type="text" name="recipient" id="recipient" maxlength="30">
Sender Name:<input type="text" name="sender" id="sender" maxlength="30">
Date:<input type="text" name="date" id="date" maxlength="25">
subject:<input type="text" name="subject" id="subject" maxlength="40">

<input type="submit" value="Generate Letter" style="color:white; background-color:green">
<input type="reset" value="Reset" style="color:white; background-color:red">

<textarea style="background-color:transparent; color:white" rows="18" cols="70" readonly="readonly" onclick="this.select()" name="lettertext" id="lettertext"></textarea>

Code (markup):

As i said i am very new to this so it probably can be simplified a lot more. I just want to get it working And then my problem down the track will be outputting it with HTML code so I can have it formatted on different lines etc.

Thanks in advance.

 

I just realised i had an extra } that didn't need to be there. I took this away and it worked.

However as i mentioned above, what i would like to do is be able to format how it comes out with HTML. Example:

<p>Today's Date: " +date+ "</p>
<p>Subject: " +subject+ "</p>
<p>Dear " +recipient+ "<br/>
Blah blah blah blah.....</p>
<p>Regards,<br/>
<p>" +sender+ "</p>

Code (markup):

How would i go about adding this in? Also if there's a much simpler way for everything I am doing i am always open for suggestions... am happy to learn

Cheers

 

I've managed to figure out that to use html within javascript i need to use the document.write function but i'm not sure how to get it to write to the readonly textbox already crated that is labelled 'lettertext'.

If it is impossible for it to to write to the text box, is there a way it can appear on the current page under the form fields? At the moment i can only manage to get it to display in a new blank page which i don't want to do.

 

Where is this letter going to end up? On the user's printer? On the screen?

That would be the value of the textbox.

 

I guess this question can be answered by self-study. So i suggest you to visit this site. w3schools.com you can get lots of idea's there. Also it is a beginner-friendly site.