demuro1 Posted August 11, 2011 Share Posted August 11, 2011 I am not very good with javascript. I have read through a few tutorials and I understand some elements of javascript but I admit I am a novice at best. I apologize if what I am trying to accomplish is not clearI am using an html web form to email data. Once the data is entered into the form a submit button opens up the default mail client on the device and the email contains all the pertinent data from the web form. The problem is that I can't format the data before it's loaded into the mail client and so I get things that look like "textfield1=data entered" I'd like that to look more like "textfield1: data entered" I know its a minor change but it's what would make the difference. I'd also like to require data entries into some fields. I'd also like to generate a time stamp int he email when it is generated.What I'd like to do is utilize javascript for this. I've heard that it can be done and I am able to find snippets of data from some of this stuff. I can't use any kind of server side scripting, not that I know any more about that, and javascript just seems to be the best solution.I may be mistaken but it I think I don't understand the method by which you'd call a document. so there should be something like formvariable.document(some javascript goes here I think) and then an on submit button at the end. I may be mistaken. Does this make any sense? Can someone point me to a tutorial with something like this as the content to perhaps provide a snippet of code that I could look at and maybe recycle?I'd appreciate any help you can provide. I'm attaching a sample form that describes what I have on the html front. <html><head><title>Sample Form</title></head><body><form action="MAILTO:aguy@someplace.com, another_guy@somewhereelse.net?subject=Daily weather report" method="post" enctype="text/plain" subject="Daily weather report"><select name="location"> <option value="error">select a store</option> <option value="store1">North Pole</option> <option value="store_2">bahamas</option></select><br /><br />Weather Conditions: <br /><input type="text" name="weather" size="100"/><br /><br />Comments or Notes:<br /><textarea rows="10" cols="30">Add comments or perish!!!!! A lack of comments shows that you were too lazy to make notes about your day</textarea><input type="submit" value="Send"><input type="reset" value="Reset"></form></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted August 11, 2011 Share Posted August 11, 2011 It's too bad you can't use a server side language, it is the most practical way to accomplish what you want. What you could do for a purely javascript implementation is to have a script get all the form values, and then format them the way you want. then javascript could re-write the href attribute (with the mailto protocol there instead of a hidden anchor element on the page, and then call it's onclick event, and then you should get your formatted values into the mail client. Make sure the function is run on the form's submit (with no mailto and have it return false, and have the form return that false value). Or better yet, have it redirect or update the page with a message for the user. Link to comment Share on other sites More sharing options...
demuro1 Posted August 11, 2011 Author Share Posted August 11, 2011 That's what I'd like to do but the javascript is a little much for me. It's the getting the values out of my html form and into javascript that I'm having a problem with. I don't know how to properly implement it. Can you provide any assistance with that with some sample code perhaps or point me to a tutorial that might help me there. I haven't been able to find anything on the net that has something like that unfortunately.Again thanks for all your help Link to comment Share on other sites More sharing options...
thescientist Posted August 11, 2011 Share Posted August 11, 2011 the easiest way to get a reference to an element on the page is to give it an ID and reference it with document.getElementById(). from here you can use .innerHTML to get the content within the element, or .value for input elements. Link to comment Share on other sites More sharing options...
demuro1 Posted August 12, 2011 Author Share Posted August 12, 2011 Thank you so much. I try look for resources based around the info you have provided. I really appreciate your help. Link to comment Share on other sites More sharing options...
demuro1 Posted September 23, 2011 Author Share Posted September 23, 2011 ok so I have been busy and and I have looked at a few things. I have the below code but I know it doesn't work. Can someone maybe help me out a bit? <html><head><title>Passing a variable</title><script type="text/javascript">function getValue() { var x=document.getElementById("formVariable"); }</script></head> <body><formname="dsr"action="MAILTO:test@test.comsubject=test&body=<script type="text/javascript">document.write("My day was: "x.innerHTML);</script>" method="post"enctype="text/plain"> How was your day: <br /><input id="formVariable" type="text" name="My day was " size="100"/><br /><br /><br><input type="submit" value="Send"><input type="reset" value="Reset"></form> I want the output to appear in my default mail client. I want the subject to be "test". I want the recipient to be "test@test.com" and I want the body to say "My day was: <and here is where the variable comes into play>" If you can help by showing me where my errors are on this I know I can modify it enough to work for me. Thanks again so much. Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2011 Share Posted September 23, 2011 The first thing to do is to validate your HTML.The form doesn't have a subject or body attributes. You need an input, textarea or select element for each form variable. The second problem is that you can't put a tag inside another tag, it's bad syntax. document.write runs the moment the page loads and then doesn't do anything more, so it's not going to help you. You will need to modify the variable just before sending it, using an onsubmit handler. <form action="mailto:test@test.com" method="post" id="form"> <fieldset> <input type="hidden" name="subject" value="test&"> How was your day? My day was <input type="text" id="body" name="body"> <input type="submit" value="Send"> </fieldset></form><script type="text/javascript"> var f = document.getElementById("form"); f.onsubmit = function() { var el = document.getElementById("body"); el.value = "My day was " + el.value; }</script> Link to comment Share on other sites More sharing options...
demuro1 Posted September 25, 2011 Author Share Posted September 25, 2011 ingolme, thanks I really appreciate your help. When I run the script I get a + between every word in the email so the email body looks like this. subject=test%26&body=My+day+was+Awesome What I'm aiming for is to have the output look like this My day was Awesome I'll work with what you've provided and see if I can figure it out. I really appreciate your time. If I add more text field are there any limitations to this kind of script? Thanks again Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 You get a + because that's how your form is encoding the data. Add an enctype attribute to the form to see if it solves the problem: http://w3schools.com/tags/att_form_enctype.asp Link to comment Share on other sites More sharing options...
demuro1 Posted October 9, 2011 Author Share Posted October 9, 2011 Still working on this. I have added an extra text field to see what kind of mileage I could get and it worked well. here is what I have now. The issue I am still having is there is a plus between every word. I also want a line break between the el.value and wet.value The out put from the below looks like this day=My+day+was+strange&rain=The+weather+was+odd and I'd like it to look like this My day was strangeThe weather was odd where strange is the el.value and odd is the wet.value you guys have all been so helpful thanks again also do you know how to populate a value into the subject field of the email? <html><head><title>passing one variable</title></head> <body> <form action="mailto:test@test.com" enctype="application/x-www-form-urlencoded" method="post" id="form"> <fieldset> How was your day? My day was <input type="text" id="day" name="day"><br>How was the weather? The weather was <input type="text" id="rain" name="rain"> <input type="submit" value="Send"> </fieldset></form> <script type="text/javascript"> var f = document.getElementById("form"); f.onsubmit = function() { var el = document.getElementById("day");var wet = document.getElementById("rain"); el.value = "My day was " + el.value;wet.value = "The weather was " + wet.value; }</script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.