call js function from form action then call php from js

Question

We can call php directly from form action in html:

<form name='x' action = "filename.php">

in this case, php will receive all inputs in the form even we don't pass them.

Can we call js function from form action in html?

<form name='x' action = "javascript:jsFunction();">

Then, call the php from the js function?

jsFunction()
{   var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("result").innerHTML = xhttp.responseText;}
    };
    xhttp.open("POST", filename.php, true);
    xhttp.send();
}

Hint 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.

Edit 1:

Now, in the 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;
        }
     };

     xhttp.open("POST", blastresult.php, true);
     xhttp.send();

    event.preventDefault();
}); 
}

it reloads the platform from the beginning of the login page!

Edit2:

I put some alert to see if the button call the javascript.

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();

The button call the js and display first 'hi' then navigate to second tab then reload the page. It stop at the second 'hi'.

Any help is highly appreciated. Thanks.

Sure, you can set an onsubmit handler on the form and then call PHP via AJAX. — Johannes Jander
– Johannes Jander, Commented Feb 22, 2016 at 20:05
@ Johannes Jander it does not return false. just reload the page. could you please see edit 2 in my post? thanks — Reem
– Reem, Commented Feb 23, 2016 at 10:39
your onclick-function should return false after calling the blast-function. then you can remove preventDefault() — Johannes Jander
– Johannes Jander, Commented Feb 23, 2016 at 10:59

Chihab JRAOUI · Accepted Answer · 2016-02-22 20:18:25Z

1

Yes you can, First give your FORM an id

<form id="myForm"></form>

then in javascript try this:

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)
{
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById("result").innerHTML = xhttp.responseText;
        }
     };

     xhttp.open("POST", filename.php, true);
     xhttp.send();

    e.preventDefault();
});

answered Feb 22, 2016 at 20:18

Chihab JRAOUI

3161 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reem Over a year ago

No need to declare "e"?

Chihab JRAOUI Over a year ago

you need to declare 'e', to use e.pereventDefault(); method

Reem Over a year ago

event.preventDefault() not working. it reload the page.

Reem Over a year ago

I replace submit in myForm.addEventListener('submit', function(e) with 'click'

Rob M. · Accepted Answer · 2016-02-22 20:07:54Z

1

Instead of:

<form name='x' action = "javascript:jsFunction();">

Use:

<form name='x' onsubmit="jsFunction();">

You can POST via AJAX as you have shown in your code:

function jsFunction(event) {
    // prevent default event from taking place (submitting form to file)
    event.preventDefault();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("result").innerHTML = xhttp.responseText;}
    };
    xhttp.open("POST", filename.php, true);
    xhttp.send();
}

Though you will need to serialize your data and pass it to xhttp.send(), it will need to be form url encoded like: key1=value1&key2=value2. You are probably better off using jQuery in the manner @mmm suggests.

answered Feb 22, 2016 at 20:07

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

5 Comments

Reem Over a year ago

could i use action instead of onsubmit? because it log me out from the platform. in other words, it reload the platform to the login page.

Rob M. Over a year ago

No, you need to use the onsubmit event in order to prevent the page from reloading (event.preventDefault())

Reem Over a year ago

event.preventDefault() not working. it reload the page.

Rob M. Over a year ago

sorry, event.preventDefault() requires you use an event listener, please take a look at this example: jsfiddle.net/91zw6zp9

Reem Over a year ago

M , I actually using event listener. I am getting crazy.

Collectives™ on Stack Overflow

call js function from form action then call php from js

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related