www.webdeveloper.com
Results 1 to 7 of 7

Thread: how to copy complete web from in email body using javascript

  1. #1
    Join Date
    Jan 2018
    Posts
    4

    how to copy complete web from in email body using javascript

    <p>Gather the following details then <b>e-mail</b> the information to <b>XYZ App Support.</b></p>

    <li>Number: <input type="text" id="SN" size="12" maxlength="20" /></li>
    <li>Serial Number :<input type="text" id="SN" size="12" maxlength="20" /> </li>
    <li>Type: <input type="text" id="SN" size="12" maxlength="20" /> </li>
    <li>Version: <input type="text" id="version" size="12" maxlength="20" /> </li>
    <li>Customer Type : <input type="text" id="SN" size="12" maxlength="20" /> </li>
    <li>Page Number:<input type="text" id="pageN" size="12" maxlength="10" /></li>
    <li>Issue/Error message :<textarea style="resize: none;" cols="30" rows="2" id="issue" name="directions" maxlength="400"></textarea></li>

    <p>Send the captured information to <b>xyz@abc.com</b></p>

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,862
    I don't see a web form, I see some inputs but no web form.

    Perhaps if you had a web form, you would be able to capture the contents.

    Also please use forum BB Code tags to wrap around your code when posting code blocks, thanks.

    So where does this data go to? Doesn't say what you are meant to do in sending the data to that email address because JavaScript has no access to email, so the only way this can be done is to send the data to a server and that requires the form to be complete, you can use JavaScript in a back ground process to send the data to a server that then processes it and emails the data out, but JavaScript has no email ability.

    My suggestion is to use a web form, use JavaScript to read the input fields and then generate a virtual form that is then uploaded to the srever for it to send the email.

    You can rely on the mailto: function of HTML if you like and use JavaScript to build the string for that data to end up in a email (assuming that their email client is not a web mail client...)
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2018
    Posts
    4
    Thanks for reply. I simply want to copy or send above html data over email but failing to capture html data into email body.
    I am new to javascript so after searching a lot I got to know javascript does not support email functionality.
    So I am trying now with mailto function however I am having difficulty in capturing above html data using java script. as you mentioned use JavaScript to build the string for that data to end up in a email, how can I write this? can you plz tell me ruff format or how can I copy complete html data & paste into email body? I tried copy pasting as well but text field & text area not getting copy, it is simply pasting blank boxes

  4. #4
    Join Date
    Jan 2018
    Posts
    4
    here is my sample code..plz help. This code populating new window with email id & subject but not populating email body with username & comment. Please tell me where am I wrong for calling java function to populate email body
    //HTML
    <form name="input_form">
    <pre> Name: <input name="username" id="username" type="text" />
    Comment: <input name="comment" id="comment" type="text" />
    </pre>
    </form> <form name="proxy_form" method="post" enctype="multipart/form-data" action="mailto:abc@abc.com?subject=web form" onsubmit="return update_message_body ();"> <input type="hidden" id="message_body" name="message_body" /> <input type="submit" value="send mail" /> </form>

    //Javascript
    function update_message_body ()
    {
    var username = document . input_form . username . value;
    var comment = document . input_form . comment . value;
    document . proxy_form . message_body . value= username + comment;
    return true;
    }

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,862
    Please USE the Forum BBCode tags, see my signature for examples of tags.

    A mailto: string is really not the best option because those people on webmail when they click those sort of links have the default app or an attempt to open the default email app and not the webmail service.

    I see you are putting spaces between the function and the parenthesise, should not be there... same for the DOM references you have, no space eitherside of the period...

    Its been a while but I think that this will demonstrate what you need...
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Email</title>
    <script>
    function process( fm ){
     console.log("action : %s",fm.action );
     console.log("username : %s",fm.username.value );
     console.log("email : %s",fm.email.value );
     console.log("comment : %s",fm.comment.value );
     alert("OK, when ready");
     return true;
    }
    
    if( location.search.indexOf("web_form") ) console.log("search : %s", location.search );
    
    </script>
    </head>
    <body>
    	<form name="inputForm" action="#" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return process( this );">
    		<input name="subject" type="hidden" value="Web Form"/>
    		<label for="username">Name:</label><br/>
    				<input name="username" type="text" value=""/><br/>
    		<label for="email">Email:</label><br/>
    				<input name="email" type="email" value=""/><br/>
    		<label for="comment"> Comment:</label> <br/>
    				<textarea name="comment" rows="8" cols="40"></textarea>
    		<hr/>
    		<input name="submit" type="submit" value="send mail" />
    </form> 
    </body>
    </html>
    The page will submit to itself and when you first run the page, please open the console log by hitting F12 (which also closes it) and click the LOG tab and the output will appear in the log as you submit the form, the alert holds the page so this output can be seen in the console log, click OK and the page calls itself and then finds that there's a search string and then displays it in the console log.

    As you will see... NO JAVASCRIPT NEEDED (other than to display the data to show that data is being sent) ... You can further improve on the input fields with the additional attributes that are available in HTML5.

    Your real world example could do the same but use PHP to process the data and send the email.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  6. #6
    Join Date
    Jan 2018
    Posts
    4
    Thanks for your reply however this code is not working for me giving failure message after submitting form.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,862
    I am giving an example of how you could do it without JavaScript, the script present shows you the data before and on page load and how a web form acn be used to post data but you can also use the action attribute with the mailto: tag.

    It is not a good idea to use the mailto method because it is not compatible with webmail services. Its amazing the number of people still using this method.

    As for errors in code, I think not, I tested before posting, if you have errors, then that is something on your set up thats corruypting data or somethings happening to cause the errors, as you have not posted wither code or error messages, its not easy advising. F12 opens and closes the console log, it would be helpful to see what these errors are.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.15063 seconds
  • Memory Usage 2,916KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates