对文本框的更改不会反映在网页上

Changes to text box are not reflected on webpage

本文关键字:网页 文本      更新时间:2023-09-26

我需要填写我的网页的字段,当我按下按钮getDetails。我提供registration id作为输入,在此基础上对数据库进行请求。我收到的响应需要显示在不同的字段中。

我得到所需的响应,并正确处理响应(使用google chrome选项inspect element验证)。我还尝试使用Inspect Element调试jsp代码,我发现响应的所有值都设置正确,但是随着控件传递所引发的请求的回调方法,然后我的网页刷新和URL更改为http://localhost:8080/ReportFetcher/FirstJSP.jsp?regid=2&regIdsubmitbutton=getDetails&Class=0

而我期望它是http://localhost:8080/ReportFetcher/FirstJSP.jsp?

,因为这个页面也有动态下拉菜单,选择一个下拉菜单后,会提出请求,处理响应,并填充其他下拉菜单。

这个场景工作得很好,所以我无法弄清楚为什么页面url在第一种情况下改变。还需要注意的是,当把页面在第一种情况下调试时,我可以看到在网页的各种元素中设置的值,这意味着(在我看来)值首先设置,然后页面刷新,这导致擦除先前设置的数据。

下面是jsp文件中的一段代码:
function funcOnChange(reqElement) {
        var valueSelected = null;
        if (reqElement.name == "Class") {
            valueSelected = reqElement.value;
            document.detail.regid.disabled = true;
        } else if (reqElement.name == "regIdsubmitbutton") {
            valueSelected = "R" + document.detail.regid.value;
        }
        document.detail.Section.options.length = 0;
        if (reqElement.name == "Class" && valueSelected == "None") {
            document.detail.Section.disabled = true;
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            // Check to see if this state change was "request complete", and
            // there was no server error (404 Not Found, 500 Server Error, etc)
            if (xhr.readyState == 4 && xhr.status == 200) {
                var substring = xhr.responseText;
                if (reqElement.name == "regIdsubmitbutton") {
                    parseResponse(substring);
                } else {
                    document.detail.Section.disabled = false;
                    // loop to update the drop down 
                    var pos = doActivateSection(substring);
                    generateTable(substring, pos);
                }
            }
            if (xhr.readyState == 404) {
                alert("404 error");
            }
            if (xhr.readyState == 500) {
                alert("500 error");
            }
        }
function parseResponse(response) {
    var name = 0, standard = 1, section = 2, rollno = 3, subject = 4, total_type = 5;
    var pos;
    var result = [];
    var data = [];
    var type = 0;
    while (type < total_type) {
        switch (type) {
        case name:
            result = readSegment(response, -1);
            break;
        case standard:
            result = readSegment(response, pos);
            break;
        case section:
            result = readSegment(response, pos);
            break;
        case rollno:
            result = readSegment(response, pos);
            break;
        case subject:
            result = readSegment(response, pos);
            break;
        default:
            break;
        }
        data = result[0];
        pos = result[1];
        type++;
        updateFormElement((type - 1), data);
    }
}
function updateFormElement(type, data) {
    var element;
    switch (type) {
    case 0:
        element = document.getElementById("studentName");
        element.value = data[0];
        element.disabled = true;
        break;
    case 1:
        document.detail.Class.options[0] = new Option(data[0], data[0], 0,
                0);
        document.detail.Class.disabled = true;
        break;
    case 2:
        document.detail.Section.options[0] = new Option(data[0], data[0],
                0, 0);
        document.detail.Section.disabled = true;
        break;
    case 3:
        element = document.getElementById("RollNo");
        element.value = data[0];
        element.disabled = true;
        break;
    case 4:
        break;
    default:
        break;
    }
}
function readSegment(res, pos) {
    var value = [];
    var result = [];
    var valueindex = 0;
    for ( var index = pos + 1; index < res.length; index++) {
        pos = index;
        if (res[index] == '|') {
            break;
        } else if (res[index] == ',') {
            valueindex++;
        } else {
            if (value[valueindex] == null
                    || value[valueindex] == 'undefined') {
                value[valueindex] = "";
            }
            value[valueindex] = value[valueindex] + res[index];
        }
    }
    result.push(value);
    result.push(pos);
    return result;
}

<form name="detail" method="post">
    <p align="center">Either Enter :</p>
    <span id="01120"><b>Registration id:</b></span> <input type="text"
        name="regid"> <span id="01119"></span> <input type="submit"
        value="getDetails" onclick="funcOnChange(this)"
        name="regIdsubmitbutton"> <br>

funcOnchange()在下拉的onChange和getDetail按钮的onClick上被调用。在parseResponse()响应文本被解析,文本被设置在各种文本框上。当调试parseResponse()正确完成时,但在页面刷新后

Submit按钮会在内部刷新页面,因此您需要更改按钮的类型,希望这样可以解决问题。

<input type="button"
        value="getDetails" onclick="funcOnChange(this)"
        name="regIdsubmitbutton">