Javascript PHP/AJAX-更新2个表单字段值

我有一个包含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>

模板
模板1
模板2
主题
消息

下面是我的脚本，它调用一个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>

函数getTemplate（str）{
如果（str==“”）{
document.getElementById（“messageBody”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
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（状态）
}
open（“POST”，“getEmailTemplate.php？tempalteID=“+str，true”）；
xmlhttp.send（）；
}

---

是否可以返回messageBody和emailSubject并同时更新？或者有更好的方法吗？

是的，在对messageBody执行相同操作之前，只需将元素添加到XML模板中并添加一行来更改它。还建议将json与jquery结合使用，这样做会更简洁、更容易处理。通过使用$.getJSON，您可以省去80%的代码。简单来说，在php响应中，使用messageBody将主题数据附加到诸如return$messageBody。“~”$emailSubject，这里的符号~就是分隔符。并使用split函数response.split（“~”）在javascript上拆分这些数据。但使用json数据是一种有效的方法。