Question

Here’s a brief rundown of my issue:

I have a JavaScript function that gets the value of a bunch of form fields, then combines them into another variable called outputArea, and then I use the same function to change the value of a textarea called “outputArea” to the value I created for outputArea in the JScript (document.thisForm.outputArea.value = outputArea).

but when I press the “Make My Notes” button that calls the function, it grabs the variables, hits my alert to dump the variables to make sure its working, then outputs to the form field I want it to… however, IMMEDIATELY after the function completes, it clears itself. By itself, I mean the whole form clears, including the outputArea.

I’ve checked my source numerous times and there are 0 references to a reset button or anything that should be clearing these values after the function is called, so I’m at a loss.

Below is my function:

<script type="text/javascript">
    function getNotes() {
        var spokeTo = document.thisForm.spokeWith.value;
        var problemWith = document.thisForm.problemWith.value;
        var resolvedBy = document.thisForm.resolvedWith.value;
        var thisTech = document.thisForm.techName.value;
        var liveChat = document.thisForm.onLiveChat.value;
        var passTo = document.thisForm.passTo.value;
        var fSpace = ".  ";
        var fSign = "  - ";

        alert(spokeTo + problemWith + resolvedBy + thisTech);

        outputValue = 'Spoke with: ' +spokeTo + fSpace + problemWith + resolvedBy + passTo + fSign + thisTech;
        document.thisForm.outputArea.value = outputValue;
        alert('DISMISS');
    }

the button that calls the function is simply:

<input type="submit" class="button" value="Make My Notes!" onClick="javascript:getNotes();" tabindex="4" style="margin-right:1em;" />

and the output field:

<textarea name="outputArea" id="outputArea" onClick="this.select();" readonly="yes"></textarea>

I added the alert(‘DISMISS’); in an attempt to see if I could (temporarily) stop the form from clearing itself by forcing the user to press OK to the alert, but strangely enough, it calls that Alert BEFORE it calls the document.thisForm.outputArea.value = outputValue, which I don’t understand. After it calls it and outputs, it immediately clears EVERY form field. This is currently the only javascript function on the whole page, and there are no reset buttons anywhere in sight.

I’ve done this tons before and actually have an application with a similar method running and working fine right now, so I’m completely baffled. What in the heck am I doing wrong here?

I greatly appreciate anyone taking time looking into this for me. Cheers!

Answer 1

This actually looks to me like your page is refreshing itself because the button is performing a submit action. Change your onClick event to this:

onClick="getNotes(); return false;"

Because this is generating a POST request (probably to itself), the page is loading as if for the first time.