Button click on Velocity template refreshes page

I’m trying to get the page generated from a Velocity template to execute some Javascript functions. I have some buttons that should execute their respective functions on click. However, the page simply refreshes whenever I click on the buttons. What is wrong?

Velocity template:

<!DOCTYPE HTML>
<html>
    <head>
        <title>$generalUtil.htmlEncode($pageTitle)</title>
        <meta name="decorator" content="atl.general" />
        #requireResource("confluence.web.resources:aui-forms")     
        #requireResource("com.example.plugin.comparator-plugin:comparator-plugin-resources")   
        #requireResource("confluence.web.resources:ajs")
    </head>
    <content tag="key">$action.space.key</content>
   
    <body>

     #applyDecorator("root")
        #decoratorParam("helper" $action.helper)
        #decoratorParam("context" "space-administration")
        #decoratorParam("mode"  "view-space-administration")
        #decoratorParam("infopanel-width" "200px")

        #applyDecorator ("root")
            #decoratorParam ("context" "spaceadminpanel")
            #decoratorParam ("selection" "comparator-plugin-action-web-ui")
            #decoratorParam ("title" $action.getText("action.name"))
            #decoratorParam ("selectedTab" "admin")
            #decoratorParam("helper" $action.helper)
    
            <form action="#" method="post" class="aui">
            <fieldset>
                <button onClick="fetchAllPagesTitlesOnClick()" style="margin: 2vh auto; display: block;">Get All Pages</button>

                <div style="display: block;"></div>

                <label for="pageTiles" style="margin: 2vh 2vw;">Select Page Title:</label>
                <select name="pageTitles" id="pageTitleSel" style="margin: 2vh auto;" onchange="fetchVersionsOfPage()">
                </select>

                <button onClick="fetchPageVersionsOnClick()" style="margin: 2vh auto; display: block;">Get All Versions</button>

                <label for="pageVersion1" style="margin: 2vh 2vw;">Select Page Version:</label>
                <select name="pageVersion1" style="margin: 2vh auto;" id="pageVersionSel1" onChange="fetchPageVersionContent(1)">
                </select>

                <div style="display: block;"></div>

                <label for="pageVersion2" style="margin: 2vh 2vw;">Select Page Version:</label>
                <select name="pageVersion2" style="margin: 2vh auto;" id="pageVersionSel2" onChange="fetchPageVersionContent(2)">
                </select>

                <div style="display: block;"></div>

                <label for="title" style="margin: 2vh 2vw;">Enter Page Title</label>
                <input name="title">
            <fieldset>
        </form>
        #end
    #end
    </body>
</html>

Javascript:

let baseURL = "http://localhost:1990/confluence";
let pageTitleJson = "";
let pageVerJson = "";
let selectedPID = "";

/**
 * fetchAllPageTitles - fetch all pages when Create is clicked
 */

function fetchAllPages() {

    //fetch all page titles using fetch api
    let url = baseURL + "/rest/api/content?type=page&start=0&limit=99999";
    fetch(url)
    .then(response => response.json())
    .then(json => {
        pageTitleJson = json.results;
    })
}

/**
 * fetchAllPagesTitlesOnClick - display all page titles in options on button click
 */

function fetchAllPagesTitlesOnClick(){
    let selOption = document.getElementById("pageTitleSel");

    //ensure that each page title is only shown once when button is clicked multiple times
    if(selOption.length > 0){
        selOption.innerHTML = "";   //remove all exisiting options first
    }

    //create and append options
    pageTitleJson.forEach(array => {
        let newOp = document.createElement("OPTION");
        newOp.textContent = array.title;
        selOption.appendChild(newOp);
    })
}

/**
 * fetchVersionsOfPage - based on page title selected, fetch all previous versions, on option change
 */

function fetchVersionsOfPage(){
    let selectedOptions = document.getElementById("pageTitleSel");

    let selectedPage = selectedOptions.options[selectedOptions.selectedIndex].text; //get the current selected value for page title

    for(let i=0; i<pageTitleJson.length; i++){
        if(pageTitleJson[i].title == selectedPage){
            let url = baseURL + "/rest/experimental/content/" + pageTitleJson[i].id + "/version"
            
            fetch(url)  //fetch all versions using fetch api
            .then(response => response.json())
            .then(json => {
                pageVerJson = json.results;
            });
        }
    }

    for(let i=0; i<pageTitleJson.length; i++){
        if(pageTitleJson[i].title == selectedPage){
            selectedPID = pageTitleJson[i].id;  //get page id of selected page
        }
    }
}

/**
 * fetchPageVersionsOnClick - display all page versions on button click
 */

function fetchPageVersionsOnClick(){
    let pageVer1Sel = document.getElementById("pageVersionSel1");
    let pageVer2Sel = document.getElementById("pageVersionSel2");

    //ensure that each page version is only shown once when button is clicked multiple times
    if(pageVer1Sel.length > 0 || pageVer2Sel.length > 0){
        pageVer1Sel.innerHTML = ""; //remove all exisiting options first
        pageVer2Sel.innerHTML = "";
    }

    //create and append options
    pageVerJson.forEach(array => {
        let newOp1 = document.createElement("option");
        let newOp2 = document.createElement("option");

        newOp1.textContent = array.number;
        newOp2.textContent = array.number;

        newOp1.setAttribute("id", "1." + array.number);
        newOp2.setAttribute("id", "2." + array.number);

        pageVer1Sel.appendChild(newOp1);
        pageVer2Sel.appendChild(newOp2);
    })    
}


/**
 * fetchPageVersionContent - fetch the content of each version and display in template
 */

function fetchPageVersionContent(num){
    let selectedOptions = document.getElementById("pageVersionSel" + num);
    let selectedPageVer = selectedOptions.options[selectedOptions.selectedIndex].text; //get the current selected value for page title
    
    
    let contentURL = "";

    let fetchURL = baseURL + "/rest/experimental/content/" + selectedPID + "/version/" + selectedPageVer;   
    fetch(fetchURL)// fetch page version content
    .then(response => response.json())
    .then(json => {
        contentURL = baseURL+json.content._links.webui;
        
        $.ajax({
            url : contentURL,
            success : function(response){
                let contentTitle = "<h3>Version " + selectedPageVer + "</h3>";
                let content = $(response).find("#main-content").html();
                
                content = contentTitle + content;

                let pageVerSel = document.getElementById(num + "." + selectedPageVer);
                pageVerSel.setAttribute("value", content);  //set the content as the value of the option
                alert("Success");
            }
        })
    });
    
}

AJS.toInit(function(){
    fetchAllPages();
})

Hi @ChongJingHong,

It is refreshing the page because it is a submit button inside a <form>.
You can change it to a simple button by adding <button type="button"

or you can prevent the form submission like:

<button onclick="fetchPageVersionsOnClick(event)">

...

function fetchAllPages(event) {
    event.preventDefault();

Regards,
TJ

Ah thank you so much!