why does Onclick=“function()” shows up 404 when I am trying to run a function in node?

Question

I am trying to run the function displayeditor, when I click the submit button. However on the webpage it shows 404 when the button is clicked. Can't seem to figure out why it does that. I am using node.js. jade express.

extends layout

block content
    h1= title
    div(id="rename", class="Name")
        form(id = "filename", method ="post")
            input(id="new_name", type ="text", placeholder="File Name")
            input(id="Okay", type="submit", value="Okay", onclick="displayeditor('editor', 'rename')")
    div(id="editor")
        |Welcome to the home pages
        |This is the first Paragraph
    script(src="javascripts/ace.js", type="text/javascript")
    script.
            var editor=ace.edit("editor")
    script(src="/jvm.js", type="text/javascript")
    script.
        function displayeditor(id, id2)
            document.getElementById(id).style.display = 'block';
            document.getElementById(id2).style.display = 'none';
            //document.getElementById(id3).style.display = 'none';

Answer 1

The button inside the form will submit the form by default on click, use e.preventDefault() or return false; to prevent the behaviour.

Answer 2

Try rewriting your Jade file as follows. There were a few errors here:

• Your Javascript code needs to be actual Javascript -- you need parenthesis / etc. Jade will NOT substitute out your JS code itself -- just the HTML tags.
• Your JS function needs to return false -- otherwise the button you click will trigger a form submission, which means your user will POST that data to your server (which I don't think you want).

Here's the working code:

extends layout

block content
    h1= title
    div(id="rename", class="Name")
      form(id = "filename", method ="post")
        input(id="new_name", type ="text", placeholder="File Name")
        input(id="Okay", type="submit", value="Okay", onclick="displayeditor('editor', 'rename')")
    div(id="editor")
      |Welcome to the home pages
      |This is the first Paragraph
    script(src="javascripts/ace.js", type="text/javascript")
    script.
            var editor=ace.edit("editor");
    script(src="/jvm.js", type="text/javascript")
    script(type="text/javascript").
      function displayeditor(id, id2) {
        document.getElementById(id).style.display = 'block';
        document.getElementById(id2).style.display = 'none';
        return false;
      }