Executing PHP with AJAX

Question

I'm trying to run a php file with AJAX from my "main.php".

The problem is that it doesnt let my stay on the main.php and moves me to "tallennus.php", when I want to stay at "main.php". The tallennus.php should be done on the background.

"tallennus.php" does it's work perfectly (saves data to database). But I want to stay on mainsite while it does it.

Im trying to use AJAX to run "tallennus.php" on the background.

Why does the site change from main.php to tallennus.php?

<button onclick="testi()">testi</button><br>
<script>
function testi()
{
    alert("function started");
    var xmlhttp;
   if (window.XMLHttpRequest) {
     xmlhttp=new XMLHttpRequest();
   } else {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

    xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            }
            xmlhttp.open("get", "tallennus.php",true);
            xmlhttp.send();
        }   




</script>

Funk Forty Niner · Accepted Answer · 2016-11-17 01:42:35Z

1

The default type of <button> is type="submit", so it submits the form. Change it to type="button".

<button type="button" onclick="testi()">testi</button><br>

As per the following reference:

https://www.w3.org/TR/html-markup/button.html

"A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"."

edited Nov 17, 2016 at 1:42

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

answered Nov 16, 2016 at 23:18

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

JoeliP · Accepted Answer · 2016-11-17 21:51:35Z

I fixed my problem by doing this:

<script>
function tallenna()
{


    var tunnus=document.getElementById('tunnus').value;
    var nimi=document.getElementById('nimi').value;
    var deadline=document.getElementById('deadline').value;
    var vaihe=document.getElementById('vaihe').value;
    var dataString=
    'tunnus='+ tunnus + 
    '&nimi='+ nimi+
    '&deadline='+ deadline+
    '&vaihe='+ vaihe;

    $.ajax({
        type:"post",
        url: "tallennus.php",
        data: dataString,
        cache:false,
        success:function(html){
            $('#msg').html(html);
        }
    });

    document.getElementById("frm").reset();// for clearing form
    return false;

}
</script>

<br><input type="submit" value="TALLENNA" onclick="return tallenna()">

Collectives™ on Stack Overflow

Executing PHP with AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related