0

I need to fill the fields of my webpage when i press the button getDetails. I provide registration id as input, on the basis of which a request to database is made. The response that i receive needs to be displayed on various fields.

I am getting the desired response, and processing the response rightly (verified using the google chrome option inspect element). Also i tried to debug the jsp code using Inspect Element, and i found that all the values of response are set correctly, but as the control passes the callback method of the request raised, then my webpage refreshes and URL changes to http://localhost:8080/ReportFetcher/FirstJSP.jsp?regid=2&regIdsubmitbutton=getDetails&Class=0

whereas i am expecting it to be http://localhost:8080/ReportFetcher/FirstJSP.jsp?

because this page also has dynamic drop down, in which after selecting one drop down, request is raised, and response is processed and other drop down is populated.

This scenario is working fine, so i am unable to figure out why page url change in first case. Also point to note is when put the page under debug in first case i could see the value set in various elements of webpage, that means(in my opinon) values are set first and then page is refreshed, which result in erasing of previously set data.

Here is piece of code from jsp file:

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() is called on drop-down's onChange and on onClick of getDetail button. in the parseResponse() response text is parsed and text is set on various textbox. While debugging parseResponse() completes correctly, but after that page refreshes.

4

1 回答 1

1

提交按钮在内部刷新页面，因此您需要更改按钮的类型，希望这能解决问题。

<input type="button"
        value="getDetails" onclick="funcOnChange(this)"
        name="regIdsubmitbutton">
于 2013-06-10T17:42:16.827 回答