我有一个包含3个字段的HTML表单。第一个允许用户从选择菜单中选择一个模板,第二个用于电子邮件主题,第三个用于电子邮件消息正文。目前,我已经设置了一个脚本,当用户更改模板选择菜单以插入邮件正文时,该脚本会触发。
我想对此进行扩展,以便同时更新电子邮件主题,但我不确定同时设置2个表单值的语法。
以下是我表格的相关部分:
<div class="row">
<div class="form-group">
<label for="firstname" class="control-label col-sm-3">Template</label>
<div class="input-group col-xs-8">
<select class="form-control" name="templateRef" id="templateRef" onchange="getTemplate(this.value)">
<option value=""></option>
<option value="1000">Template 1</option>
<option value="2000">Template 2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="postcode" class="control-label col-sm-3 left-label">Subject</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" name="emailSubject" id="emailSubject" placeholder="Subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="postcode" class="control-label col-sm-3 left-label">Message</label>
<div class="input-group col-xs-8">
<textarea class="form-control" rows="15" name="emailBody" placeholder="Body" id="messageBody"></textarea>
</div>
</div>
</div>
这是我的脚本调用PHP页面,该页面当前返回所选模板的相应messageBody:
<script type="text/javascript">
function getTemplate(str) {
if (str == "") {
document.getElementById("messageBody").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("messageBody").innerHTML = xmlhttp.responseText;
}
var status = xmlhttp.status == 200 ? 'success' : 'error'
var group = document.getElementById("messageBody")
group.classList.add(status)
}
xmlhttp.open("POST", "getEmailTemplate.php?tempalteID=" + str, true);
xmlhttp.send();
}
</script>
是否可以返回messageBody和emailSubject并同时更新?或者有更好的方法吗?