title: call js function from form action then call php from js
body: <p>We can call php directly from form action in html:</p>
  
  <pre><code>&lt;form name='x' action = "filename.php"&gt;
  </code></pre>
  
  <p>in this case, php will receive all inputs in the form even we don't pass them. </p>
  
  <p>Can we call js function from form action in html?</p>
  
  <pre><code>&lt;form name='x' action = "javascript:jsFunction();"&gt;
  </code></pre>
  
  <p>Then, call the php from the js function?</p>
  
  <pre><code>jsFunction()
  {   var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
          if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                  document.getElementById("result").innerHTML = xhttp.responseText;}
      };
      xhttp.open("POST", filename.php, true);
      xhttp.send();
  }
  </code></pre>
  
  <p><strong>Hint</strong>
  I cannot use onsubmit because it log me out from the platform. in other words, it reload the platform from the beginning of the login page.
  I am working on integration and I don't have a clear idea about the platform.</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>Now, in the HTML file:</p>
  
  <pre><code>&lt;form enctype='multipart/form-data' id = "myform"&gt;
  
  &lt;input type='submit' value='Basic search' onclick = "i2b2.BLAST.jsFunction();"&gt;
  </code></pre>
  
  <p>JS file:</p>
  
  <pre><code>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 &amp;&amp; xhttp.status == 200)
          {
              document.getElementById("result").innerHTML = xhttp.responseText;
          }
       };
  
       xhttp.open("POST", blastresult.php, true);
       xhttp.send();
  
      event.preventDefault();
  }); 
  }
  </code></pre>
  
  <p>it reloads the platform from the beginning of the login page!</p>
  
  <p><strong>Edit2:</strong></p>
  
  <p>I put some alert to see if the button call the javascript. </p>
  
  <pre><code>i2b2.BLAST.jsFunction = function () 
  {
     alert('hi');
  
      this.yuiTabs = new YAHOO.widget.TabView("BLAST-TABS", {activeIndex:1});//this two lines navigate to second tab
      this.yuiTabs.set('activeIndex', 1);
  
  alert('hi');
      myForm.addEventListener('submit', function()
      {
         alert('hi');
          preventDefault();
  </code></pre>
  
  <p>The button call the js and display first 'hi' then navigate to second tab then reload the page. It stop at the second 'hi'.</p>
  
  <p>Any help is highly appreciated.
  Thanks.</p>