通过电子邮件发送预选 HTML 个输入

Question

我想弄清楚如何编写一些代码，这些代码将从下拉列表中选择输入并预先选择它们，以便个人可以在生成代码后复制代码。我目前有一个人需要选择的 6 个属性，最后在底部生成一个部件号。理想情况下，我希望将生成的代码发送到可以发送给我公司的 RFQ 的电子邮件中，或者预先选择下面框中的输入，以便用户只需右键单击所有 6 个框被复制，然后他们可以 post 到表格、电子邮件等中

我在使用我的代码时遇到问题。我当前的表单和页面格式代码在这里：

<div style="width: 900px; float: left; margin-left: 30px;"><h1>Request a Quote</h1>
<div style="width: 300px; float: left; padding-right:30px;">
<h4 style="line-height:24px;">Please complete the form at the right to contact a representative regarding your request.</h4> 
</div>
<div style="width: 500px; float: left; padding: 20px; background-color: #eee;">
<div>
 <body>
  <form id="example" name="example">
     <b>Sensor Type</b><br>
    <select id="sensor" onchange="updateText('sensor')">
    <option value="">Select One</option>
    <option value="J">J</option>
     <option value="K">K</option>
</select>
<br>
<br>
    <b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
    <option value="">Select One</option>
    <option value="120V">120V</option>
    <option value="240V">240V</option>
</select>
<br>
 <br>
<b>Amps</b><br>
<select id="amps" onchange="updateText('amps')">
    <option value="">Select One</option>
    <option value="10">10</option>
    <option value="15">15</option>
</select>
<br>
<br>
<b>Channels</b><br>
  <select id="channels" onchange="updateText('channels')">
    <option value="">Select One</option>
    <option value="1">1</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
 <select id="connector" onchange="updateText('connector')">
    <option value="">Select One</option>
    <option value="ML2">NEMA ML2 Mini Twist Lock (Standard)</option>
</select>
<br>
<br>
    <b>Thermocouple</b><br>
 <select id="thermocouple" onchange="updateText('thermocouple')">
    <option value="">Select One</option>
    <option value="J">JType</option>
    <option value="K">KType</option>
</select>

<br>
<br>

    <br />
    <input type="text" value="" maxlength="1" size="1" id="sensorText" /> -     <input type="text" value="" maxlength="1" size="1" id="voltageText" /> - <input type="text" value="" maxlength="1" size="1" id="ampsText" /> - <input type="text" value="" maxlength="1" size="1" id="channelsText" /> - <input type="text" value="" maxlength="1" size="1" id="connectorText" /> - <input type="text" value="" maxlength="1" size="1" id="thermocoupleText" />

</form>

<script type="text/javascript">

function updateText(type) { 
 var id = type+'Text';
 document.getElementById(id).value = document.getElementById(type).value;
}
</script>
</body>
</div>

如有任何帮助，我们将不胜感激。如果可能的话，我正在尝试使用 HTML 或 Javascript 来实现这一点。如果需要，我可以扩展任何内容。非常感谢！

Answer 1

您好，为了达到您的期望，我对您的表格进行了一些修改

<div style="width: 900px; float: left; margin-left: 30px;"><h1>Request a Quote</h1>
<div style="width: 300px; float: left; padding-right:30px;">
<h4 style="line-height:24px;">Please complete the form at the right to contact a representative regarding your request.</h4> 
</div>
<div style="width: 500px; float: left; padding: 20px; background-color: #eee;">
<div>
 <body>
  <form id="example" name="example">
     <b>Sensor Type</b><br>
    <select id="sensor" onchange="updateText('sensor')">
    <option value="">Select One</option>
    <option value="J">J</option>
     <option value="K">K</option>
</select>
<br>
<br>
    <b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
    <option value="">Select One</option>
    <option value="120V">120V</option>
    <option value="240V">240V</option>
</select>
<br>
 <br>
<b>Amps</b><br>
<select id="amps" onchange="updateText('amps')">
    <option value="">Select One</option>
    <option value="10">10</option>
    <option value="15">15</option>
</select>
<br>
<br>
<b>Channels</b><br>
  <select id="channels" onchange="updateText('channels')">
    <option value="">Select One</option>
    <option value="1">1</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
 <select id="connector" onchange="updateText('connector')">
    <option value="">Select One</option>
    <option value="ML2">NEMA ML2 Mini Twist Lock (Standard)</option>
</select>
<br>
<br>
    <b>Thermocouple</b><br>
 <select id="thermocouple" onchange="updateText('thermocouple')">
    <option value="">Select One</option>
    <option value="J">JType</option>
    <option value="K">KType</option>
</select>

<br>
<br>

    <br />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" /> 
<input type="hidden" value="" maxlength="1" size="1" id="ampsText" />
<input type="hidden" value="" maxlength="1" size="1" id="channelsText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermocoupleText" />
    
<input type="text" value="" maxlength="1" size="1" id="completeText" style="width: 300px;" />

</form>

<script type="text/javascript">

function updateText(type) { 
 var id = type+'Text';
 var endValue;
 var inputValue = document.getElementById(type).value;
 
 document.getElementById(id).value = inputValue;
 
 endValue = document.getElementById("sensorText").value;
 if(document.getElementById("voltageText").value != ""){
   endValue = endValue+"-"+document.getElementById("voltageText").value;
 }
 if(document.getElementById("ampsText").value != ""){
   endValue = endValue+"-"+document.getElementById("ampsText").value;
 }
 if(document.getElementById("channelsText").value != ""){
   endValue = endValue+"-"+document.getElementById("channelsText").value;
 }
 if(document.getElementById("connectorText").value != ""){
   endValue = endValue+"-"+document.getElementById("connectorText").value;
 }
 if(document.getElementById("thermocoupleText").value != ""){
   endValue = endValue+"-"+document.getElementById("thermocoupleText").value;
 }
 document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>

我已经将主要输入设置为隐藏，然后创建一个主要输入，其中 js 将添加隐藏输入的文本，以便用户可以轻松复制它。

我用一种简单的方式编写了 javascript 可能还有其他方法可以达到相同的结果，而无需强制在 if 条件下列出每个输入

Answer 2

您可能要考虑将不同的输入合并为一个输入。据我所知，不幸的是，无法同时从多个输入中 select 文本。

对于一个不错的设计可能需要很长的输入：

<input type="text" size="40" id="txtcode" style="letter-spacing: 5px;"/>

并且代码应该简单明了；只需将所有不同的值合并为一个，中间用破折号连接即可。

<script>
    var types = ['sensor', 'voltage', 'amps', 'channels', 'connector', 'thermocouple'];

    function updateText(type) {
        var text = '';
        for (var i in types) {
            if (i != 0) text += '-';
            text += document.getElementById(types[i]).value;
        }
        document.getElementById('txtcode').value = text;
        document.getElementById('txtcode').select();
    }
</script>

请注意，对于 "pre-select" 输入字段中的文本，您可以使用 document.getElementById('txtcode').select();

JSFiddle：http://jsfiddle.net/dx24dkkw/3/

Answer 3

您可以按照这些其他人的建议来制定电子邮件正文。但是，虽然您当然可以执行 AJAX 来发送电子邮件，但您可能只需要让用户使用默认电子邮件客户端自行发送。为此，只需使用 window.open():

window.open("mailto:myname@somedomain.com?Subject=My%20Test&Body=This%20is%20my%20test%20email.");

通过电子邮件发送预选 HTML 个输入

Emailing Preselected HTML Inputs

html

javascript

forms

input