CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
ryoga86
ryoga86

Reputation: 83

Executing PHP with HTML Button (jQuery)

i got a website with some buttons and a camerastream which shows a coffee machine. with php function i'm able to set the machine on/off via TCP/IP messages. Now i would like to send on/off commands over button, without refreshing the website. After reading some similar threads, i recognized that the only way is using AJAX.

After pressing Button the Page doesnt refresh but it seems that something in backround get done. But my "Test" String doesnt get show.

Does anyone know whats wrong with my code? Thanks in advance!

ajax.php

<?php
if($_POST['action'] == 'call_this') {
    echo 'TEST';
}
?>

buttonClick.js

function myAjax() {
  $.ajax({
       type: "POST",
       url: 'ajax.php',
       data:{action:'call_this'},
       success:function(html) {
         alert(html);
       }

  });
}

index.php

<html>
<head>
    <script src="jquery-1.12.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
<form>
    <input type="submit" name="submit" value="SET ON" onClick="myAjax()">
</form>
....
....
</body>
</html>

Upvotes: 0

Views: 99

Answers (3)

Rajesh
Rajesh

Reputation: 954

Modified Mouad Nejjari code as below and this works

index.php

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>   
    </head>
    <body>
    <button id="btnTest">Click</button>
    <script>
    $(document).ready(function () {
    $('#btnTest').click(function () {
    $.ajax({
       type: "POST",
       url: 'ajax.php',
       data:{action:'call_this'},
       success:function(html) {
         alert(html);
       }
     });
    })});    
   </script>
   </body>
   </html>

ajax.php

<?php
if($_POST['action'] == 'call_this') {
    echo 'TEST';
}
?>

Upvotes: 2

Mouad Nejjari
Mouad Nejjari

Reputation: 107

Try This, ajax.php :

<?php
if($_POST['action'] == 'call_this') {
    echo 'TEST';
}
?>

buttonClick.js :

$(document).ready(function()
{
     $("#form1").submit(function (e) {
            e.preventDefault();
            $.ajax({
           type: "POST",
           url: 'ajax.php',
           data:{action:'call_this'},
           success:function(html) {
             alert(html);
            }
         });
    })
})

index.php :

<html>
<head>
    <script src="jquery-1.12.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
<form id="form1">
    <input type="submit" name="submit" value="SET ON">
</form>
....
....
</body>
</html>

Upvotes: 0

Patrick Murphy
Patrick Murphy

Reputation: 2329

You are using the HTML element input with a type set to submit, this means that on click the page assumes you want to be redirected to the handling page URL normally supplied in the Form tag. You can use the javascript method of PreventDefault() or you can change the element from a form submit to a link like this.

<html>
<head>
    <script src="jquery-1.12.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script>
</head>
<body>
....
....
<a href="javascript: myAjax()">SET ON</a>
....
....
</body>
</html>

A link with a javascript href will not try and redirect. Your example left the page before waiting for the php script to return.

Upvotes: 0

Related Questions