call js function from form action

[Reem50]

I am working on integrate some php file with my platform. The platform using HTML for interface and js file for functionality.
I try two appraches:
First approach: I call filename.php from form tag action and it is working but, it display the result from php file outside my platform "different url".

I want to display the result inside the interface of my platform so, I follow second approach:
Second approach: I call js file from form onsubmit. this js will change the content of some div in my html bay calling the php file.

HTML file:

<form enctype='multipart/form-data' id = "myform"> <input type='submit' value='Basic search' onclick="i2b2.BLAST.jsFunction()">

JS file:

i2b2.BLAST.jsFunction = function () 
{
   var myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function(event)
    {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        { document.getElementById("result").innerHTML = xhttp.responseText;} // change the content of div "result"
     };
     xhttp.open("POST", blastresult.php, true);
     xhttp.send();
    event.preventDefault();
});  
}

Now, the problem is: it reloads the platform from the beginning of the login page! I try show some alert at the beginning of js function but it does not displayed. It seems that <input type='submit' value='Basic search' onclick="i2b2.BLAST.jsFunction()"> not call the js function instead it reloads the platform.

Any help is highly appreciated.
Thanks.

[AleMonteiro]

It's realoding the page because your button it's a submit button, that means it will submit your form to the action url.

Just change the button type from submit to button and it should work as expected.

<input type='button' value='Basic search' onclick="i2b2.BLAST.jsFunction()">

[jkon]

Why should we know what i2b2.BLAST.jsFunction is ? are you in a i2b2.BLAST forum ? Except if this your own way of naming variables , that is really problematic

[AndrisP]

You can change

<form enctype='multipart/form-data' id = "myform"> <input type='submit' value='Basic search' onclick="i2b2.BLAST.jsFunction()">

to

<form enctype="multipart/form-data" id="myform" onsubmit="i2b2.BLAST.jsFunction(); return false;"> <input type="submit" value="Basic search" >

then your function call when user press enter on any input field (same as submit button)