Web Analytics Made Easy -
StatCounter sending form vie email - CodingForum

Announcement

Collapse
No announcement yet.

sending form vie email

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • sending form vie email

    Hi All

    I need to sent a form via email. Unfortunately I can't use server side for this. At least at the time being.

    I want:
    a) send it behind the scene, i.e. without opening the e-mail window;
    b) fill the e-mail's body with form data in nice looking way: not in pairs name=value, but something like "Name: your value".

    By experiment I found that to fulfil the a) I must use POST method. But in this case message's body comes exactly in name=value pairs.

    If I use GET I'm in control of body appearance but can't make it into lines - \r and \n do not work at all, \b gives a new line but also a square at the end of each line, like "Name: myname"

    This is how I'm doing this:

    <script type="text/javascript">

    function sendEmail()
    {
    var send_form = document.all.ser_req;

    var addr="[email protected]";
    var subj="test server request";

    var body_text="Please ... blah-blah-blah...:";

    body_text+="\b Officer: "+document.all.officer.value;
    body_text+="\b Phone: "+document.all.phone.value;
    body_text+="\b Server Requirements: "+document.all.server_reqs.value;
    body_text+="\b Operating System Requirements: "+document.all.sys_reqs.value;
    body_text+="\b Application: "+document.all.application.value;
    body_text+="\b Additional comments: "+document.all.comments.value;


    send_form.action="mailto:"+addr+"?subject="+subj+"&body="+body_text;
    send_form.method="post";
    send_form.submit();
    }
    </script>

    </head>

    <body>


    <form id="ser_req">
    .....
    .....
    <input type="button" name="ok" value=" OK " onclick="sendEmail();"/>
    </form>

    So, the question is: is it possible to implement both a) and b)?
    If not, how to resolve 'new line' problem.

    Thanks
    a born aries

  • #2
    To implement item "a)", you need a server-side language.

    item b:

    send_form.action="mailto:"+addr+"?subject="+escape(subj)+"&body="+escape(body_text);
    send_form.method="get";
    send_form.submit();

    You must escape the body and subject values so that special charactes are URL-encoded.

    Implementing mailto is not reliable since not all users have default mail client installed or configured. So you better start using server-side language soon.
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      Glenn,

      Thanks for quick reply.

      Escape/GET helped. But besides it is GET there is another trouble: at the very end of the message body I have "officer=name" added, where 'officer' is the first field in the form.

      Yet POST allows me to send email without opening a window. And it is very tempting.

      As to server-side language I use asp but as I said not in this case. To tell you the truth I'm nearly commanded what to use. :-) On the other hand because I work for department everything is structured, so I'm assuered that all my users have mail client installed or configured.

      Thanks again
      a born aries

      Comment


      • #4
        Originally posted by nadi
        But besides it is GET there is another trouble: at the very end of the message body I have "officer=name" added, where 'officer' is the first field in the form.

        Yet POST allows me to send email without opening a window. And it is very tempting.
        What's the problem with the "officer" field?
        You can only use POST when using a server-side language.
        If you are restricted to using mailto protocol, then GET is the only method you can use.
        Glenn
        vBulletin Mods That Rock!

        Comment


        • #5
          Originally posted by glenngv
          What's the problem with the "officer" field?
          Again, here is the string I form:

          body_text+="\b Officer: "+document.all.officer.value;
          body_text+="\b Phone: "+document.all.phone.value;
          body_text+="\b Server Requirements: "+document.all.server_reqs.value;
          body_text+="\b Operating System Requirements: "+document.all.sys_reqs.value;
          body_text+="\b Application: "+document.all.application.value;
          body_text+="\b Additional comments: "+document.all.comments.value;

          Here is the body of an email in Outlook:

          Officer: name
          Phone: phone
          Server Requirements: CPU Intensive
          Operating System Requirements: Windows
          Server Role: Database
          Environment: Dev/IDC
          Application: application
          Business Priority: Low
          Additional comments: comments
          ?officer=name

          The problem is in the last string. I need to get rid of it.

          Thanks
          a born aries

          Comment


          • #6
            Can you post the code after the line:

            body_text+="\b Additional comments: "+document.all.comments.value;

            The string "?officer=name" is passed as part of body_text but I don't see it in the code you posted.
            Glenn
            vBulletin Mods That Rock!

            Comment


            • #7
              Hi Glenn,

              There are only three lines after:

              send_form.action="mailto:"+addr+"?subject="+escape(subj)+"&body="+escape(body_text);
              send_form.method="get";
              send_form.submit();
              }//end of the function.
              </script>

              After this html comes.
              a born aries

              Comment


              • #8
                If you do alert(body_text) before the send_form.action line, do you see the string "?officer=name" at the end?
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  By the way, Glenn, I'm searching forum for solution and found in some old post this code (posted by beetle):
                  //----------------------------------------------------------------
                  <script>
                  function doSubmit(f, hField) {
                  for (var i = 0; i<f.elements.length; i++) {
                  var e = f.elements[i];
                  if (/(?:hidden|submit|reset)/i.test(e.type)) break;
                  f.elements[hField].value += e.name + ": " + e.value + "%0D%0A";
                  e.disabled = true;
                  }
                  return true;
                  }
                  </script>

                  <form name="form1" method="post" onSubmit="return doSubmit(this, 'data')" action="mailto:[email protected]" enctype="text/plain">
                  <input type="text" name="First_Name" />
                  <input type="text" name="Last_Name" />
                  <input type="hidden" name="data" value="" />
                  <input type="submit" value="Submit" />
                  </form>

                  //---------------------------------------------

                  As I'm still keen to use POST method I tried this code. The body of email I received contained 'data=' and then 'f.elements[hField].value'. I mean that 'data=' presents anyway. So, is there no way to escape this 'name=value' form?
                  a born aries

                  Comment


                  • #10
                    No, I do not see it
                    a born aries

                    Comment


                    • #11
                      So, Glenn, no idea what causes that additional '?officer=' string?
                      In fact, it picks the first element (and only the first, even hidden. Why?)

                      In desperation I even tried to implement an asp way, but was told that this is strictly to be implemented without server side.

                      Ple-e-e-e-ease any idea.
                      a born aries

                      Comment


                      • #12
                        No idea

                        Please post the whole code or an online link (if any) so that I can test it myself.
                        Glenn
                        vBulletin Mods That Rock!

                        Comment


                        • #13
                          Here is the code. Thank you Glenn.

                          <html>
                          <head>
                          <title></title>

                          <style>
                          .text{
                          font-family:arial;
                          font-size:14;
                          font-weight:bold;
                          color:#336699;
                          }
                          .formelts{
                          font-family:arial;
                          font-size:12;
                          }

                          </style>

                          <script type="text/javascript">

                          function sendEmail()
                          {

                          if(!validateForm())
                          {
                          return false;
                          }
                          var send_form = document.all.ser_req;

                          var addr="[email protected]";
                          var subj="Server Request";

                          var body_text="";

                          body_text+="\n Officer: "+document.all.officer.value;
                          body_text+="\n Phone: "+document.all.phone.value;
                          body_text+="\n Server Requirements: "+document.all.server_reqs.value;
                          body_text+="\n Operating System Requirements: "+document.all.sys_reqs.value;
                          body_text+="\n Server Role: "+document.all.role[defineChecked(document.all.role)].value;
                          body_text+="\n Environment: "+document.all.environment[defineChecked(document.all.environment)].value+"/"+document.all.subenvironment[[defineChecked(document.all.subenvironment)]].value;
                          body_text+="\n Application: "+document.all.appl.value;
                          body_text+="\n Business Priority: "+document.all.prior[defineChecked(document.all.prior)].value;
                          body_text+="\n Additional comments: "+document.all.comments.value+"\n";

                          send_form.action="mailto:"+addr+"?body="+escape(body_text)+"&subject="+escape(subj);
                          send_form.method="get";
                          send_form.submit();
                          }

                          function validateForm()
                          {
                          var noName="";
                          var noPhone="";
                          var noApp="";

                          if(document.all.officer.value=="")
                          noName="Please enter your name";
                          if(document.all.phone.value=="")
                          noPhone="Please enter your phone number";
                          if(document.all.appl.value=="")
                          noApp="Please enter application name";

                          if((noName=="")&&(noPhone=="")&&(noApp==""))
                          return true;

                          alert(noName+"\n"+noPhone+"\n"+noApp);
                          return false;
                          }

                          function defineChecked(coll)
                          {
                          var ind=0;
                          for(var i=0;i<coll.length;i++)
                          {
                          if(coll[i]=="checked")
                          ind=i;
                          }
                          return ind;
                          }
                          </script>

                          </head>

                          <body>

                          <table border="0" cellspacing="5" cellpadding="5" width="100%">
                          <tr>
                          <td width="33%">
                          <img src="logo.jpg">
                          </td>
                          <td align="center" style="font-family:arial;font-size:24;font-weight:bold;color:#336699;background:#fffcf2;">
                          SERVER REQUEST
                          </td>
                          </tr>
                          </table>


                          <form id="ser_req">

                          <table border="0" cellspacing="5" cellpadding="5" width="100%" align="center">
                          <tr>
                          <td width="10%">&nbsp;</td>
                          <td width="23%" class="text">
                          Requestor
                          </td>
                          <td style="background:#fffcf2;">
                          <input id="officer" name="officer" type="text" value="" style="width:145;"/>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Phone
                          </td>
                          <td style="background:#fffcf2;">
                          <input id="phone" name="phone" type="text" value="" style="width:145;"/>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Server Requirements
                          </td>
                          <td style="background:#fffcf2;">
                          <select id="server_reqs" name="server_reqs" size="1" class="formelts" style="width:145;">
                          <option value="CPU Intensive">CPU Intensive</option>
                          <option value="Storage Intensive">Storage Intensive</option>
                          <option value="Memory Intensive">Memory Intensive</option>
                          </select>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Operating System Requirements
                          </td>
                          <td style="background:#fffcf2;">
                          <select id="sys_reqs" name="sys_reqs" size="1" class="formelts" style="width:145;">
                          <option value="Windows">Windows</option>
                          <option value="SQL">SQL</option>
                          <option value="IIS">IIS</option>
                          <option value="FrontPage">FrontPage</option>
                          </select>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Server Role
                          </td>
                          <td style="background:#fffcf2;" class="formelts">
                          <input type="radio" value="Database" name="role" checked/>Database
                          <input type="radio" value="File" name="role"/>File
                          <input type="radio" value="Print" name="role"/>Print
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Environment
                          </td>
                          <td style="background:#fffcf2;" class="formelts">
                          <input type="radio" value="Dev" name="environment" checked />Dev
                          <input type="radio" value="TST" name="environment"/>TST
                          <input type="radio" value="PROD" name="environment"/>PROD&nbsp;&nbsp;<b>(</b>
                          <input type="radio" value="IDC" name="subenvironment" checked/>IDC
                          <input type="radio" value="EDC" name="subenvironment"/>EDC
                          <input type="radio" value="Other" name="subenvironment"/>Other&nbsp;<b>)</b>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Application
                          </td>
                          <td style="background:#fffcf2;">
                          <input id="appl" name="application" type="text" style="width:145;"/>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text">
                          Business Priority
                          </td>
                          <td style="background:#fffcf2;" class="formelts">
                          <input type="radio" value="Low" name="prior" checked/>Low
                          <input type="radio" value="High" name="prior"/>High
                          <input type="radio" value="Medium" name="prior"/>Medium
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td class="text" valign="top">
                          Additional Comments
                          </td>
                          <td style="background:#fffcf2;">
                          <textarea id="comments" name="comments" value="" cols="50" rows="5" class="formelts">
                          </textarea>
                          </td>
                          </tr>

                          <tr>
                          <td></td>
                          <td colspan="2">
                          <b style="font-family:arial;font-weight:bold;font-size:13;">Make sure you filled in all fields, then press OK.</b>
                          a born aries

                          Comment


                          • #14
                            The code works for me in IE6 and Outlook 6. I don't see the string "?officer=name" trailing in the body of the message. See the screenshot.
                            Attached Files
                            Glenn
                            vBulletin Mods That Rock!

                            Comment


                            • #15
                              That is very strange.
                              Thank you, Glenn.
                              a born aries

                              Comment

                              Working...
                              X