HTML Form with javascript subject input

**craiggaynor** · 11-24-2011, 11:39 AM

Hi guys,

I'm looking for a way i can set some of the mailto form data - mainly the full name and holiday start date into the subject line of the email.

this is the code for my form:

Code:

<html>
<head>
<body bgcolor="#DCDCDC">
<font size="3" face="tahoma" color="#000000">
<form action="MAILTO:christopher.davies@Halifax.co.uk?subject=Holiday Request" method="post" enctype="text/plain" font-weight: bold; size="10" maxlength="30">

<u><b>Holiday Request Form</b></u>
<br /><br />
First Name: <input type="text" name="first-name" /> 
<br /><br />
Last Name: <input type="text" name="last-name" /> 
<br /><br />

Holiday Type:

<select name = "Holiday Type">
  <option value="new holiday">New Holiday</option>
  <option value="amend holiday">Amend Holiday</option>
  <option value="delete holiday">Delete Holiday</option>
</select>

<br /><br />
Start Holiday:
<select name = "Start Day">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>

</select>

&nbsp;/

<select name = "Start Month">
  <option value="january">Jan</option>
  <option value="febuary">Feb</option>
  <option value="march">Mar</option>
  <option value="april">Apr</option>
  <option value="may">May</option>
  <option value="june">Jun</option>
  <option value="july">Jul</option>
  <option value="august">Aug</option>
  <option value="september">Sep</option>
  <option value="october">Oct</option>
  <option value="november">Nov</option>
  <option value="december">Dec</option>
</select>

&nbsp;/

<select name = "Start Year">
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>

<br /><br />
End Holiday:
<select name "End Day">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>

</select>

&nbsp;/

<select name = "End Month">
  <option value="january">Jan</option>
  <option value="febuary">Feb</option>
  <option value="march">Mar</option>
  <option value="april">Apr</option>
  <option value="may">May</option>
  <option value="june">Jun</option>
  <option value="july">Jul</option>
  <option value="august">Aug</option>
  <option value="september">Sep</option>
  <option value="october">Oct</option>
  <option value="november">Nov</option>
  <option value="december">Dec</option>
</select>

&nbsp;/

<select name = "End Year">
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>

<br /><br />
Total Hours Required:

<input type="text" name="total-hours" size="6"/>


<br /><br />
Notes Box:
<br />
<textarea name="Additional Info" rows="5" cols="40">
Enter here any additional information that may be required.
</textarea> 

<br /><br />
Half Day Tickbox:
<input type="checkbox" name="half-day" value="half-day"/>

<br /><br />

  Start Shift:

  <select name = "Start Shift Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Start Shift Minutes">

  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>

<br /><br />
End Shift:
  <select name = "End Shift Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "End Shift Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Lunch Start:
  <select name = "Lunch Start Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Lunch Start Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Lunch End:
  <select name = "Lunch End Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Lunch End Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
</select>


<br /><br />
Holiday Start Time:
  <select name = "Holiday Start Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Holiday Start Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Holiday End Time:
  <select name = "Holiday End Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Holiday End Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />

<input type="submit" value="Send">

</form>
</font>
</body>
</head>
</html>

Thanks,
Craig

**vwphillips** · 11-24-2011, 12:50 PM

Note I have changes the start date names

Code:

<html>
<head>
<script type="text/javascript">
/*<![CDATA[*/

function Send(frm){
 var fst=frm['first-name'].value,lst=frm['last-name'].value,d=frm['Start-Day'].value,m=frm['Start-Month'].value,y=frm['Start-Year'].value,mess=['Please Complete:'];
 if (fst.replace(/\s/g,'').length==0){
  mess.push('First Name');
 }
 if (lst.replace(/\s/g,'').length==0){
  mess.push('Last Name');
 }
 if (mess[1]){
  return alert(mess.join('\n'));
 }
 frm.action='MAILTO:christopher.davies@Halifax.co.uk?subject='+fst+' '+lst+' : '+d+'-'+m+'-'+y;
 frm.submit();
}
/*]]>*/
</script>

</head>
<body bgcolor="#DCDCDC">
<font size="3" face="tahoma" color="#000000">
<form method="post" enctype="text/plain" font-weight: bold; size="10" maxlength="30">

<u><b>Holiday Request Form</b></u>
<br /><br />
First Name: <input type="text" name="first-name" />
<br /><br />
Last Name: <input type="text" name="last-name" />
<br /><br />

Holiday Type:

<select name = "Holiday Type">
  <option value="new holiday">New Holiday</option>
  <option value="amend holiday">Amend Holiday</option>
  <option value="delete holiday">Delete Holiday</option>
</select>

<br /><br />
Start Holiday:
<select name = "Start-Day">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>

</select>

&nbsp;/

<select name = "Start-Month">
  <option value="january">Jan</option>
  <option value="febuary">Feb</option>
  <option value="march">Mar</option>
  <option value="april">Apr</option>
  <option value="may">May</option>
  <option value="june">Jun</option>
  <option value="july">Jul</option>
  <option value="august">Aug</option>
  <option value="september">Sep</option>
  <option value="october">Oct</option>
  <option value="november">Nov</option>
  <option value="december">Dec</option>
</select>

&nbsp;/

<select name = "Start-Year">
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>

<br /><br />
End Holiday:
<select name "End Day">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>

</select>

&nbsp;/

<select name = "End Month">
  <option value="january">Jan</option>
  <option value="febuary">Feb</option>
  <option value="march">Mar</option>
  <option value="april">Apr</option>
  <option value="may">May</option>
  <option value="june">Jun</option>
  <option value="july">Jul</option>
  <option value="august">Aug</option>
  <option value="september">Sep</option>
  <option value="october">Oct</option>
  <option value="november">Nov</option>
  <option value="december">Dec</option>
</select>

&nbsp;/

<select name = "End Year">
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>

<br /><br />
Total Hours Required:

<input type="text" name="total-hours" size="6"/>


<br /><br />
Notes Box:
<br />
<textarea name="Additional Info" rows="5" cols="40">
Enter here any additional information that may be required.
</textarea>

<br /><br />
Half Day Tickbox:
<input type="checkbox" name="half-day" value="half-day"/>

<br /><br />

  Start Shift:

  <select name = "Start Shift Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Start Shift Minutes">

  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>

<br /><br />
End Shift:
  <select name = "End Shift Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "End Shift Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Lunch Start:
  <select name = "Lunch Start Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Lunch Start Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Lunch End:
  <select name = "Lunch End Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Lunch End Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
</select>


<br /><br />
Holiday Start Time:
  <select name = "Holiday Start Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Holiday Start Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />
Holiday End Time:
  <select name = "Holiday End Hours">
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>

</select>
:
  <select name = "Holiday End Minutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>

</select>


<br /><br />

<input type="button" value="Send" onmouseup="Send(this.form);" >

</form>
</font>
</body>
</head>
</html>

Thread: HTML Form with javascript subject input

Thread Tools

Search Thread

HTML Form with javascript subject input

Bookmarks

Bookmarks

Posting Permissions