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

时间:2015-10-18 15:10:10

标签: javascript php jquery html ajax

我有一个包含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并同时更新?或者有更好的方法吗?

0 个答案:

没有答案