Self defined Javascript function not working as I expected?

Question

I had developed a LOGO-like basic turtle graphics interpreter a few years back, I wan't to put it on the web (as my cousin keeps bugging me for it). Though I am quite new to HTML, Javascript coding I thought I would give it a try & take this as a learning experience.

The below code is just for the basic UI (my UI looks very ugly and I will clean it up later).

I have written a Javascript function pushCmd which is called onsubmit of the "cmd-form".

function pushCmd()
            {   var cmdText = document.forms["cmd-form"]["cmd-text"].value;
                var srcElement = document.getElementById("source-container");
                var srcText = new String(srcElement.innerHTML);
                srcText = srcText.toUpperCase();
                if (srcText.indexOf("NO CODE") != 0)
                {
                    srcText = cmdText;
                }
                else
                {
                    srcText += "<br>" + cmdText;
                }
                srcElement.innerHTML = srcText;
            }

The form is declared like below.

<div id="command-container">
                                    <form name="cmd-form" action="" onsubmit="pushCmd()" onreset="resetSource()" method="post">
                                        <input type="text" name="cmd-text" size="80">
                                        <input type="submit" value="Send">
                                        <input type="reset" value="Reset">
                                        <input type="button" value="Run">
                                    </form>
                                </div>

The pushCmd function should alter the HTML content of the div "source-container" which by default looks like below.

<div id="source-container">NO CODE</div>

After I submit the first text (say "FWD 100"). The content of the "source-container" should change to "FWD 100". Then If I submit "RT 90", the content should be "FWD 100
RT 90". This is what I expect out of it.

But when I submit the text. The content of the "source-container" changes for just an instant and then again comes back to "NO CODE". Why is this happening, can anyone please point out where my mistake lies?

I tried both get & post methods but the result is the same. I cannot see any errors or warnings in the Javascript console either. I am using Google chrome Version 26.0.1410.63 if that matters (I guess not).

Please let me know if you need any further information or the full HTML source for this.

Answer 1

It's happening because HTML forms submit to the server by sending a new HTTP request which in your case, with the empty action attribute, is similar to refreshing the page in your browser. In order to prevent the browser from performing the default action (submitting the form) you can return false from your function, by adding return false; as a last line in it:

function pushCmd() {
    var cmdText = document.forms["cmd-form"]["cmd-text"].value;
    var srcElement = document.getElementById("source-container");
    var srcText = srcElement.innerHTML.toUpperCase();

    if (srcText.indexOf("NO CODE") !== 0)
    {
        srcText = cmdText;
    }
    else
    {
        srcText += "<br>" + cmdText;
    }
    srcElement.innerHTML = srcText;
    return false;
}

Then change your HTML attribute to return the return value of your function from the onsubmit:

onsubmit="return pushCmd()"