autogenerate letters using HTML and javascript

Question

I want to find a way to generate letters by clicking on a simple link. The text of the letter is always going to be the same except for the name and address of the person. I am going to put these into the following link: http://www.myurl.com/generate?name=Max#?address=Address#

I tried making an HTML page with a script that changes the string, but since I'm an absolute newcomer to HTML, CSS, and JavaScript I have no idea if there is an easier way to do it...

At first I wanted to generate the template for the letter with placeholders in it but I failed, since I cant hardcode the layout. — jobr97, Dec 21 '15 at 22:17
Would it be possible to let the javascript generate a pdf file from a template? — jobr97, Dec 21 '15 at 22:18
Javascript can't do anything with files on its own. You would need something more to generate a PDF. Why can't you hardcode the layout? — Marie, Dec 21 '15 at 22:36
Hard-coding is as easy as could be. Can you expand on what you mean by clicking on a link? Like.. Do you want to send the link to somebody and have their information on the page they view? — Marie, Dec 21 '15 at 22:39
I have a contacts program that supports "smart links" they are links with placeholders in which the programm puts each persons details. I want to be able to click the link in order to print the letter — jobr97, Dec 22 '15 at 07:50

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

If you would like to have a static page with a simple message you can just use some strings as placeholders and replace them on page load. I don't think javascript has a built-in way to read the querystring so I borrowed a method from another StackOverflow question for this example.

<pre id="message">
    Hello, {name}. Your address is {address}.

    Goodbye, {name}!
</pre>

<script type="text/javascript">
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    var name = getParameterByName('name');
    var address = getParameterByName('address');

    var letterBox = document.getElementById("message");
    letterBox.innerHTML = 
        letterBox.innerHTML
            .replace(/{name}/g, name)
            .replace(/{address}/g, address);
</script>

To see this in action check out this codepen:

http://codepen.io/anon/pen/OMXZKw?name=Toni&address=555%20Main%20St

edited May 23 '17 at 11:44

Community

1
1

answered Dec 21 '15 at 22:45

Marie

2,114
1
17
31

this was exactly what I was looking for. however, when I have {name} in the text more than once it only replaces the first one. how can I change it in the whole html code?(http://codepen.io/JoelBrun/pen/zrBWLm?company=Test+Company&title=Mr.&firstName=John&lastName=Test&adress=Test+20&zipCode=4598&place=Testplace&startDate=24.12.2015) – jobr97 Dec 22 '15 at 11:04
@Joel I updated my answer. I am on my phone so I can't test it but it should do what you need – Marie Dec 22 '15 at 12:35
thank you. it works perfectly. – jobr97 Dec 22 '15 at 12:49
No problem, glad to help! – Marie Dec 22 '15 at 12:52

autogenerate letters using HTML and javascript

1 Answers1