How to get Javascript/HTML Form data into order confirmation email

Question

I have created a form using JavaScript and HTML. Currently, I click submit and the data on the form is pulled through and displayed in textstrings in a textarea at the bottom of the page. The submit button opens up an email in a new window. I need to combine the two and get the data that was in the textarea to be pulled through to the email, in the new window, in the contents area so that once it is submitted, the email will show the form data. Can anyone help?

<html>
<head>


<title>Reservation form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function open_win() 
{
window.open("email response.html");
}
<!--

// This is the check script

function checkit()
{
    // In textstring I gather the data that are finally written to the textarea.

    var textstring = '';

    // First of all, have all the text boxes been filled in?
    // This part is treated in the normal page.
    // I put all boxes and their values in textstring

    for (i=0;i<4;i++) {
        var box = document.forms['example'].elements[i];
        if (!box.value) {
            alert('You haven\'t filled in ' + box.name + '!');
            box.focus()
            return;
        }
        textstring += box.name + ': ' + box.value + '\n';
    }




    // Get value of the 'Car' select box.

    user_input = document.example.refer1.options[document.example.refer1.selectedIndex].value;
    textstring += '1st Car: ' + user_input + '\n';

        user_input = document.example.refer2.options[document.example.refer2.selectedIndex].value;
    textstring += '2nd Car: ' + user_input + '\n';

            user_input = document.example.refer3.options[document.example.refer3.selectedIndex].value;
    textstring += '3rd Car: ' + user_input + '\n';
        // Get value of the 'When' radio buttons.

    user_input = '';
    for (i=0;i<document.forms['example'].when.length;i++) {
        if (document.forms['example'].when[i].checked) {
            user_input = document.forms['example'].when[i].value;
        }
    }
    textstring += 'When: ' + user_input + '\n';

            // Get value of the 'Fee' radio buttons.

    user_input = '';
    for (i=0;i<document.forms['example'].fee.length;i++) {
        if (document.forms['example'].fee[i].checked) {
            user_input = document.forms['example'].fee[i].value;
        }
    }
    textstring += 'Fee: £' + (user_input*5) + '\n';



    // Write textstring to the textarea.

    document.forms['example'].output.value = ("\n*** Thank You for your reservation***"+"\n")+ textstring + ("\n*** End of Form***"+"\n");

}
// -->
</script>
</head>
<body>

<h2>Reservation form</h2>

<div id="header"></div>
<p class="intro">&nbsp;</p>

<form name="example" action="#" onSubmit="checkit(); return false">
  <div align="center">
    <table class="form">
      <tr>
        <td colspan="3"><div align="left">
          <p><u><strong> Personal Details</strong></u>        </p>
        </div></td>
      </tr>
      <tr>
        <td width="125" height="25">&nbsp;</td>
        <td width="315"><div align="left">Name</div></td>
        <td width="187"><p>
          <input name="Name" />
        </p></td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td><div align="left">Telephone</div></td>
        <td><p>
          <input name="Telephone" />
        </p></td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td><div align="left">Mobile</div></td>
        <td><p>
          <input name="Mobile" />
        </p></td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td><div align="left">E-mail</div></td>
        <td><p>
          <input name="E-mail" />
        </p></td>
      </tr>

      <tr>
        <td>&nbsp;</td>
        <td>How did you want to learn About us?</td>
        <td><p>&nbsp;
            </p>
          <p>
            <input type="checkbox" name="Television" />
            Television<br />
          <input type="checkbox" name="Radio" />Radio<br />
          <input type="checkbox" name="Word of mouth" />Word of mouth<br />
        <input type="checkbox" name="Other" />Other</p></td>
      </tr>

      <tr>
        <td colspan="5"><div align="left">
          <p><u><strong>Reservation Details</strong></u>        </p>
        </div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Option 1</td>
        <td>Option 2</td>
        <td>Option 3</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td height="56"><p>Please Choose a Car you want to Reserve?</p>
        <h5>(You can only Reserve Max 3 Cars per visit)</h5></td>
        <td><select name="refer1">
          <option value='' selected="selected">--- Select ---</option>
          <option value="Ford Fiesta 1.6">Ford Fiesta 1.6</option>
          <option value="Ford Fiesta 1.4">Ford Fiesta 1.4</option>
          <option value="Ford KA 1.3">Ford KA 1.3</option>
          <option value="Nissan Micra 1.1">Nissan Micra 1.1</option>
          <option value="Nissan Micra 1.2">Nissan Micra 1.2</option>
          <option value="Nissan Micra 1.0">Nissan Micra 1.0</option>
          <option value="Peugeot 206 1.1">Peugeot 206 1.1</option>
          <option value="Peugeot 206 1.4">Peugeot 206 1.4</option>
          <option value="Peugeot 106 1.1">Peugeot 106 1.1</option>
          <option value="Renault Clio 1.1">Renault Clio 1.1</option>
          <option value="Renault Clio 1.4">Renault Clio 1.4</option>
          <option value="Renault Clio 1.2">Renault Clio 1.2</option>
          <option value="Toyota Aygo 1.0">Toyota Aygo 1.0</option>
          <option value="Toyota IQ 1.0">Toyota IQ 1.0</option>
          <option value="Toyota Yaris 1.3">Toyota Yaris 1.3</option>
          <option value="Vauxhall Corsa 1.2">Vauxhall Corsa 1.2</option>
          <option value="Vauxhall Corsa 1.4">Vauxhall Corsa 1.4</option>
          <option value="Vauxhall Corsa 1.0">Vauxhall Corsa 1.0</option>
          </select>
        </td>
        <td width="176"><select name="refer2">
          <option value='' selected="selected">--- Select ---</option>
          <option value="Ford Fiesta 1.6">Ford Fiesta 1.6</option>
          <option value="Ford Fiesta 1.4">Ford Fiesta 1.4</option>
          <option value="Ford KA 1.3">Ford KA 1.3</option>
          <option value="Nissan Micra 1.1">Nissan Micra 1.1</option>
          <option value="Nissan Micra 1.2">Nissan Micra 1.2</option>
          <option value="Nissan Micra 1.0">Nissan Micra 1.0</option>
          <option value="Peugeot 206 1.1">Peugeot 206 1.1</option>
          <option value="Peugeot 206 1.4">Peugeot 206 1.4</option>
          <option value="Peugeot 106 1.1">Peugeot 106 1.1</option>
          <option value="Renault Clio 1.1">Renault Clio 1.1</option>
          <option value="Renault Clio 1.4">Renault Clio 1.4</option>
          <option value="Renault Clio 1.2">Renault Clio 1.2</option>
          <option value="Toyota Aygo 1.0">Toyota Aygo 1.0</option>
          <option value="Toyota IQ 1.0">Toyota IQ 1.0</option>
          <option value="Toyota Yaris 1.3">Toyota Yaris 1.3</option>
          <option value="Vauxhall Corsa 1.2">Vauxhall Corsa 1.2</option>
          <option value="Vauxhall Corsa 1.4">Vauxhall Corsa 1.4</option>
          <option value="Vauxhall Corsa 1.0">Vauxhall Corsa 1.0</option>
          </select>
        </td>
        <td width="195"><select name="refer3">
          <option value='' selected="selected">--- Select ---</option>
          <option value="Ford Fiesta 1.6">Ford Fiesta 1.6</option>
          <option value="Ford Fiesta 1.4">Ford Fiesta 1.4</option>
          <option value="Ford KA 1.3">Ford KA 1.3</option>
          <option value="Nissan Micra 1.1">Nissan Micra 1.1</option>
          <option value="Nissan Micra 1.2">Nissan Micra 1.2</option>
          <option value="Nissan Micra 1.0">Nissan Micra 1.0</option>
          <option value="Peugeot 206 1.1">Peugeot 206 1.1</option>
          <option value="Peugeot 206 1.4">Peugeot 206 1.4</option>
          <option value="Peugeot 106 1.1">Peugeot 106 1.1</option>
          <option value="Renault Clio 1.1">Renault Clio 1.1</option>
          <option value="Renault Clio 1.4">Renault Clio 1.4</option>
          <option value="Renault Clio 1.2">Renault Clio 1.2</option>
          <option value="Toyota Aygo 1.0">Toyota Aygo 1.0</option>
          <option value="Toyota IQ 1.0">Toyota IQ 1.0</option>
          <option value="Toyota Yaris 1.3">Toyota Yaris 1.3</option>
          <option value="Vauxhall Corsa 1.2">Vauxhall Corsa 1.2</option>
          <option value="Vauxhall Corsa 1.4">Vauxhall Corsa 1.4</option>
          <option value="Vauxhall Corsa 1.0">Vauxhall Corsa 1.0</option>
          </select>
      </td></tr>
            <tr>
        <td>&nbsp;</td>
        <td><p>Please confirm the number of cars you have reserved:</p><p><h5>(Please note there is a &#163;5 reservation fee per car. This charge needs to be paid on arrival of visit. This will be deducted from the price of the car if purchased.)</h5></p>
        </td>
        <td><br />

          <p>
          <input type="radio" name="fee" value="1" />1<br />
          <input type="radio" name="fee" value="2" />2<br />
        <input type="radio" name="fee" value="3" />3</p></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><p>What day would you like to come and visit the car?</p>
        <h5>(You can visit the car any time of your cosen day please contact us for more infomation.)</h5></td>
        <td><p>
          <input type="radio" name="when" value="MONDAY" />
          MONDAY<br />
          <input type="radio" name="when" value="TUESDAY" />
          TUESDAY
          <br />
          <input type="radio" name="when" value="WEDNESDAY" />
          WEDNESDAY
          <br />
          <input type="radio" name="when" value="THURSDAY" /> 
          THURSDAY
          <br />
          <input type="radio" name="when" value="FRIDAY" />
          FRIDAY<br />
          <input type="radio" name="when" value="SATURDAY-SUNDAY" />
      SATURDAY-SUNDAY</p></td></tr>
      <tr><td colspan="3"><div align="center">
           <input type="submit" value="Submit form" onclick="open_win()"/>
        <br />
        <input type="reset" />
      </div></td></tr>
      <tr><td colspan="3"><div align="right">
        <textarea cols="45" rows="8" name="output">When you hit 'Submit' the user input will be written to this textarea</textarea>
      </div></td></tr>
    </table>
  </div>
</form>
</body
</html>

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

To use jQuery to access content inside the new window add jquery.js to your email response.html.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Then you can access it straightforward from within your "first" page:

// create new window from html file
var emailWnd = window.open("email response.html");

// in general to copy html to the new window
emailWnd.document.$('body').html(" ... some programmaticaly created elements ... ");

// or for example to copy text from an input element to an element in the new window
emailWnd.document.$('#somewhere').text($('input[name="Mobile"]').text());

Reference to a similar question: Using JQuery to Access a New Window's DOM

edited May 23 '17 at 11:56

Community

1
1

answered Jan 17 '13 at 20:27

Lemonade

503
2
8

Thank you, the third one is what I need, copy text from an input element to an element in the new window. Sorry to be pedantic but I have no experience with this part of Javascript. I have created the jquery.js and copied the coding into it and linked it into the email response.html. Do I need to add anything to the form? Why is the name="Mobile"? Thanks again! – Adam Cooke Jan 17 '13 at 20:50
Well the name is Mobile because it has a name="Mobile" attribute in the html file you provided. And with jQuery.js, it is a library, you can just include it from google. – Lemonade Jan 18 '13 at 06:22
I put the library in and it didnt work having changed the coding you suggested. This is what I have changed it to. // or for example to copy text from an input element to an element in the new window emailWnd.document.$('contents').text($('input[name="output"]').text()); The output is where it is going from and contents is where it needs to appear in the new file. – Adam Cooke Jan 18 '13 at 09:17

How to get Javascript/HTML Form data into order confirmation email

1 Answers1