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 by 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 ()
{ alert('hi'); // this alert is displayed
this.yuiTabs = new YAHOO.widget.TabView("BLAST-TABS", {activeIndex:1});// this navigate to second tab
this.yuiTabs.set('activeIndex', 1);
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event)
{
alert ('hi'); // this alert does not displayed instead it reload the page
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: The button call the js and display first ‘hi’ then navigate to second tab then reload the platform from the beginning of the login page! It stop at the second ‘hi’.
Any help is highly appreciated.
Thanks.
Simply, I create html file with three tabs. First tab contains form that takes inputs from user and when click run button it should execute php file and return the result to the second tab.
I were use: <form action="file.php" method = "post">
it do the job but, it refresh my current page with “file.php” url and display the result.
I think if I want to change some content of html “display result in second tab” , I must use javascript that will call the php file. How to do that? I have 3 files: html, php, js
Don’t jumble the JavaScript in with the HTML. Keep the JavaScript all together at the bottom of the page.
Use an event listener to attach the submiot event to the form from within the JavaScript.
Use preventDefault from within the function the event listener runs so as to prevent the form being submitted (as that is the default behaviour of the sumbit button unless you override it).
You are performing preventDefault on a non-existent object instead of on the event that triggered the script. Also preventDefault only works with listeners and not with the old event handlers.
Here’s your original code slightly amended to include my suggestions. Not sure if it resolves your problem but it should be closer to fixing it.
HTML file:
<form enctype='multipart/form-data' id = "myform">
<input type='submit' value='Basic search'>
JS file:
i2b2.BLAST.jsFunction = function (e)
{ alert('hi'); // this alert is displayed
this.yuiTabs = new YAHOO.widget.TabView("BLAST-TABS", {activeIndex:1});// this navigate to second tab
this.yuiTabs.set('activeIndex', 1);
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event)
{
alert ('hi'); // this alert does not displayed instead it reload the page
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();
e.preventDefault();}); }
document.getElementById('myform').addEventListener('submit', i2b2.BLAST.jsFunction , false);