javascript function visual-studio-2013 visual-studio-debugging onsubmit

How to reverse a string in javascript?

I'm trying to learn JavaScript through .html files in Visual Studio 2013.

I know there are easier ways to reverse a string in JavaScript, but my main aim is to understand interaction between html and JavaScript to provide such a solution.

Also, the IDE has to be Visual Studio as eventually I want to code this same logic using .aspx files.

So, for my initial learning attempt, I'm trying to implement the following logic:

get a string from input tag of form,
submit form resulting in the script submit() to run,
the script reverses the string, and then
displays reversed string in the same input tag which is now disabled

Code I've written is as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <script type="text/javascript">
        function reverseString() {
            var s = document.getElementById('reverseString').value;
            var reversed;

            for (var i = s.length - 1; i >= 0; i--) {
                reversed += s[i];
            }

            document.getElementById('reverseString').disabled = true;
            document.getElementById('reverseString').value = reversed;
        }

        function submit(form) {
            reverseString();
        }
    </script>

    <title>Play with Code</title>
</head>

<body>
    <form name="myform" onsubmit="submit();">
        Reverse String: <input type="text" id="reverseString"/><br/>
        <input type="submit" value="Submit"/>
    </form> 
</body>
</html>

It doesn't work and I'm really clueless as to how to solve it.

I unsuccessfully tried to debug following the instructions provided by these links:

How to debug (only) JavaScript in Visual Studio?

http://www.aspsnippets.com/Articles/Debug-JavaScript-and-jQuery-using-Visual-Studio-in-Internet-Explorer-browser.aspx

Please help me to fix this code and also, if possible, please advise or direct me on how to debug such a piece of code.

Thanks.

Solution

Here's a working code with comments to explain you what you are doing wrong:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Play with Code</title>
</head>
<body>
    <form name="myform" id="form">
        Reverse String: <input type="text" id="reverseString"/><br/>
        <input type="submit" value="Submit"/>
    </form>
    <script>
        function reverseString() {
            var s = document.getElementById('reverseString').value;
            // reverse should initialized as a empty String
            // to prevent adding char to "undefined" string
            var reversed = '';

            for (var i = s.length - 1; i >= 0; i--) {
                reversed += s[i];
            }

            document.getElementById('reverseString').disabled = true;
            document.getElementById('reverseString').value = reversed;
        }

        function submit(ev) {
            // preventDefault prevent the form to do his automatic
            // behavior which submit the form with a new HTTP request
            ev.preventDefault();
            reverseString();
        }

        // Attach the event to the form
        document.getElementById('form').addEventListener('submit', submit);
    </script>
</body>
</html>