文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >发送电子邮件预选的HTML输入

问发送电子邮件预选的HTML输入
EN

Stack Overflow用户
提问于 2015-02-09 17:12:03
回答 3查看 68关注 0票数 0

我试图找出如何编写一些代码，这些代码将接受从下拉列表中选择的输入并预选它们，这样个人就可以在代码生成后复制代码。我目前有一个人需要选择的6个属性，在底部生成一个部件号。理想情况下，我希望将生成的代码发送到电子邮件中，该电子邮件可以发送到我的公司进行RFQ，或者在下面的框中预选输入，这样用户只需右击即可复制所有6个框，然后将其发送到表单、电子邮件等。

我有一个问题，用我的代码这样做。我当前的表单和页面格式代码如下：

代码语言：javascript
复制
<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来实现这一点。如果需要的话，我可以扩展任何事情。非常感谢!

html
forms
input
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-09 18:30:58

嗨，我已经编辑了你的表格，试着达到你的期望。

​

代码语言：javascript
复制
<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条件中列出每个输入。

票数 0
EN

Stack Overflow用户

发布于 2015-02-09 18:40:46

您可能需要考虑将不同的输入加入到一个输入中。据我所知，不幸的是，无法同时从多个输入中选择文本。

也许一个好的设计需要长时间的投入：

代码语言：javascript
复制
<input type="text" size="40" id="txtcode" style="letter-spacing: 5px;"/>

代码应该是直接向前的；简单地将所有不同的值连接成一个，中间加上一个破折号。

代码语言：javascript
复制
<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>

注意，要“预选”输入字段中的文本，可以使用document.getElementById('txtcode').select();。

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

票数 1
EN

Stack Overflow用户

发布于 2015-02-09 18:50:59

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

代码语言：javascript
复制
window.open("mailto:myname@somedomain.com?Subject=My%20Test&Body=This%20is%20my%20test%20email.");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28415355

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档