javascript - 如何将 Javascript/HTML 表单数据输入订单确认电子邮件

Question

我使用 JavaScript 和 HTML 创建了一个表单。目前，我单击提交，表单上的数据被拉出并显示在页面底部文本区域的文本字符串中。提交按钮会在新窗口中打开一封电子邮件。我需要将两者结合起来，然后将 textarea 中的数据拉到电子邮件中，在新窗口中的内容区域中，这样一旦提交，电子邮件就会显示表单数据。任何人都可以帮忙吗？

<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 · Accepted Answer

要使用 jQuery 访问新窗口中的内容，请将jquery.js添加到您的电子邮件 response.html中。

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

然后，您可以从“第一”页直接访问它：

// 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());

参考类似问题： Using JQuery to Access a New Window's DOM

javascript - 如何将 Javascript/HTML 表单数据输入订单确认电子邮件

1 回答 1

Related

Reference