ryoga86 February 2016

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>

Answers


Patrick Murphy February 2016

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.


Mouad Nejjari February 2016

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>


Rajesh February 2016

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';
}
?>

Post Status

Asked in February 2016
Viewed 1,251 times
Voted 5
Answered 3 times

Search




Leave an answer