Forum Moderators: open
While I have managed to use JavaScript to make just the map and directions print:
<a onclick="printSelection(document.getElementById('res-detail-directions'));return false" href="#">
<img alt="Print these directions" src="/images/print-directions.png"/>
</a>
I was wondering if I could use the same "getElementById" method to put in the &body portion of my
<a href="mailto: ?subject=Directions&body=(JavaScript here that calls the id with the directions)">
Is this even possible? how would I go about executing this? I have tried searches on it but with no luck.
<head>
<script language="JavaScript" type="text/javascript">
<!--
var directions=document.getElementById("foo");
//-->
</script>
</head><body>
<div id="foo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in purus nec risus laoreet dapibus et vel tellus. Pellentesque rhoncus orci a velit gravida non tincidunt mi malesuada. Pellentesque eu sem turpis. Maecenas hendrerit metus et massa molestie quis sodales sem aliquam. Praesent blandit convallis tempus. Vestibulum feugiat porta euismod. Etiam est quam, dictum sed luctus at, fringilla id ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae ante eget velit aliquet gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quam ante, tincidunt non elementum vitae, hendrerit in justo.</p>
</div>
<a href="javascript:void(window.location='mailto:?subject=Directions&body='+directions);" title="Directions">Email Directions</a>
</body>
What am I doing wrong. Can I even use getElementById as a var?
document.getElementById("foo").innerHTML;
var directions=document.getElementById("foo").firstChild.innerHTML;
getElementById('foo') references the element with the id='foo'. in this case your div. BUT it is just a reference to the div 'OBJECT' and not the it's contents.
firstChild references the first element inside foo, which is the <P> tag
innerHTML gets all the text inside <P> which is what your looking for.
you will also need an 'INPUT' field for users to enter to email address to use and place that into your mailto link
to attach the directions to the email link you need to lookup how to properly create a 'mailto' link
[google.com...]
Source code loads from the top down. So when you do this,
<script language="JavaScript" type="text/javascript">
<!--
var directions=document.getElementById("foo");
//-->
</script>
the element "foo" has not rendered yet. It doesn't exist. So it will always be undefined.
Move the code to the bottom before the closing body tag, or, in combination with the above suggestions for accessing the content, use the window.onload event. The first will work, but the latter allows you to move to code to an external file. Also it's always best to TEST for the element first.
<script type="text/javascript">
window.onload=function() {
if (document.getElementById("foo")) {
var directions=document.getElementById("foo").firstChild.innerHTML;
}
}; // Not a typo, end of function
</script>
Last, don't do this. It renders your content inaccessible for non-javascript browsers.
<a href="javascript:void(window.location='mailto:?subject=Directions&body='+directions);" title="Directions">Email Directions</a>
instead, although you won't be able to "grab" the content, you will have at least something:
<a href="mailto:example@example.com?subject=Visit+this+page+for_directions&body='http://www.exampe.com/directions.html" onclick="window.location='mailto:example@example.com?subject=Directions&body='+directions); return false;" title="Directions">Email Directions</a>
The return false will stop the action in href from executing.
[edited by: rocknbil at 9:18 pm (utc) on Jan. 12, 2010]
After looking all day and finding tons of different methods it turns out all I did need was the .firstChild.innerHTML; part.
<html>
<body>
<div id="foo">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in purus nec risus laoreet dapibus et vel tellus. Pellentesque rhoncus orci a velit gravida non tincidunt mi malesuada. Pellentesque eu sem turpis. Maecenas hendrerit metus et massa molestie quis sodales sem aliquam. Praesent blandit convallis tempus. Vestibulum feugiat porta euismod. Etiam est quam, dictum sed luctus at, fringilla id ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae ante eget velit aliquet gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quam ante, tincidunt non elementum vitae, hendrerit in justo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in purus nec risus laoreet dapibus et vel tellus. Pellentesque rhoncus orci a velit gravida non tincidunt mi malesuada.</p>
</div>
<h3>Notes</h3><a href="mailto: " onclick="this.href += email_content()">Email Foo</a>
<script type="text/javascript">
<!--
function email_content(){
var subject = "Directions To" + document.title;var body = "";
if(document.getElementById("foo")){
body = document.getElementById("foo").textContent;
}return "?subject=" + subject + "&body=" + body;
}
//-->
</script></body>
</html>
I took a little from you guys as well as hear and there. I am not that strong when it comes to JavaScript. I am more of a HTML/CSS guy.
Anyways:
the firstChild.innerHTML returned with nothing in the body of the email. And if I just getElementByID it ads the "<p>,</p>" (or any other tags I might add). So my question is this now:
How can I get the basic format of the html (the paragraphs/h1,h2/tables) to remain the same in the emails body? or is this asking too much?
