call js function from <form> action

[Reem arfaj]

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.

[Bear Bibeault]

If you want to activate some JavaScript code upon forum submit, you want to include the script on the page and call it from an event handler that captures the submit event. Be sure to return false from the handler to prevent the form from actually submitting and replacing the page.

Using jQuery makes all of this almost trivial.

[Reem arfaj]

Bear Bibeault wrote:If you want to activate some JavaScript code upon forum submit, you want to include the script on the page and call it from an event handler that captures the submit event. Be sure to return false from the handler to prevent the form from actually submitting and replacing the page.

Using jQuery makes all of this almost trivial.

I did not understand you. I am new to event handler. Is there something wrong with my code?

[Bear Bibeault]

The code, is, well, not well organized. But the primary issues I see are that the onclick handler is unneeded as you are handling the submit event -- and is likely to get in the way-- POST seems like the wrong operation, and why is the form multi-part?

And again, this can be simplified and tightened up greatly through the use of jQuery (where it pretty much becomes a single line of code).

[Reem arfaj]

Bear Bibeault wrote:The code, is, well, not well organized. But the primary issues I see are that the onclick handler is unneeded as you are handling the submit event -- and is likely to get in the way-- POST seems like the wrong operation, and why is the form multi-part?

And again, this can be simplified and tightened up greatly through the use of jQuery (where it pretty much becomes a single line of code).

I am new to this all work. Can you tell me how jquery work?

[Bear Bibeault]

Using jQuery, an Ajax call to fetch data and load it into an element is as simple as:

$('target-element').load('url-to-backend-resource')

In your case you'd identify the element on the page to be loaded with the result of the PHP, and the URL to the PHP resource.

jQuery also makes it easier to declare the submit hander:

$('form-selector').submit(function(event){ /* handler code here */ });

Don't forget to remove the onclick attribute. It's going to cause problems.

[Bear Bibeault]

And, of course, if you really want to get onboard with jQuery, there's my book: jQuery in Action, 3rd Edition