0

I have a bunch of input forms like email, name, message, etc.. I have made all the fields mandatory. Is it possible with jquery to prefill the message textarea with inputs from other forms but the user can still be able to edit some text? My goal is to provide a sort of div preview based on the user's input + other bunch of information. The preview's goal is to show to the user what his/her message would look like in an email message when submitted. Example below of fields 

 Name: John Doe
 email: johndoe@example.com
 Institution: Institute of Aquaculture

I would like to prefill the message textarea with:

To Whom It May Concern:    

Please supply document: {Item requested}. Retrieved from 
{Referring Page}.

I will use the requested material only for private study, scholarship or
research.

Regards,
John Doe<johndoe@example.com>

The user can edit the content of the textarea if he/she is not satisfied with the content and would like to add other information.

I want the div preview to display:

**This is the text to be sent to the responsible person.**

To Whom It May Concern:    

Please supply document: {Item requested}. Retrieved from 
{Referring Page}

I will use the requested material only for private study, scholarship or
research.

Regards,
John Doe<johndoe@example.com>

Name: {From input form}
Institution: {From input form}
Item requested: {Generated automatically}
Logged In As: {from input form}
Referring Page: {Generated automatically}

Please note that Item requested and Referring Page were generated automatically. I searched in stackoverflow on how to pre-fill/populate a textarea and how to generate a preview based on input forms, but somehow I don't know how to combine these two. Any suggestions on how to achieve this or is this at all possible? Thanks in advance.

Community
  • 1
  • 1
euler
  • 1,401
  • 2
  • 18
  • 39
  • something like this? http://jsfiddle.net/qcxmb75z/ – rogelio Oct 10 '14 at 04:20
  • @rogelio, yes, could you please post your answer so that I can accept it? I just figured it myself a while ago but your code is more cleaner. Can you also edit your code so that it will generate the div preview? Thanks a lot! – euler Oct 10 '14 at 04:33

1 Answers1

1

Basically, for prefill the textarea, make a string and then replace the values from the input. In this example I enclosed between 2 colons the word for replace later:

var text = "Some text here, this is the :name: from input";

text = text.replace(':name:', $('#name').val());

See the full example on jsfiddle

rogelio
  • 1,541
  • 15
  • 19
  • Just to complete my answer. with `text.replace(/:name:/g, "the_text")` you can replace all occurrences of :name:` – rogelio Oct 10 '14 at 15:32