Unable to call the custom function

I have custom app in that inside www folder i have hello.html, hello.js, hello.py
hello.html

    <h1>Calculate</h1>
    <form onsubmit="search('deepak3')">
      <div class="inputbox">
        <input type="text" required="required" name="first_name">
        <span>First Name</span>
      </div>
      <div class="inputbox">
        <input type="text" required="required" name ="second_name">
        <span>Second Name</span>
      </div>
      <div class="inputbox">
        <input type="submit" value="submit" >
      </div>
    </form>

hello.js

search = function (args) {
    console.log(args);
    window.alert(args);
    return frappe.call({
      type: "POST",
      method: "cluster.www.hello.data",
      args: args,
      //callback: opts.callback
    });
  }

hello.py
location of the file apps/cluster/cluster/www/hello.py

import frappe

@frappe.whitelist()
def data(firstname):
    print("This is name", firstname)

I dont know why if i click on sumbit it is not calling this whitelisted function, it it keep on redirecting to get url
something like

From:
http://mysite.test:8000/hello
To:
http://mysite.test:8000/hello?first_name=hello&second_name=are

Someone kindly let me know the way to call that function and to redirect to a new html page.