CODEWITHSUNDEEP
phpjqueryajax
albertone74
albertone74

Reputation: 17

Ajax Submit form without refreshing the page

I hope someone could help me out with this.

First of all I do apologize if this question has already been asked. Before posting here I did go through all the relevant posts from where I have learnt a lot. But still I am struggling to make it work. The problem I have got is that whenever I press any button from the main .html page the php script seems to work fine (ie. if I press the left button my camera turns to the left) but soon after the .php page gets loaded into the browser as if I was navigating to it.

Please find below the code for the main .html file

<html>
<head>
<script type="text/javascript"             src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$("#newForm").on("submit", function(e){

    var $inputs = $('#newForm :input'),
        values = {};
    $inputs.each(function() {
      values[this.name] = this.value;
    });

    $.ajax({
      type : "POST",
      url : "mycamera.php",
      data: values,
      success : function(res) {
        $("#result").html(res);
        $("input[type=text]").val("");
      }
    });

    return false;
  });

    $(".back").on("click", function(){
    $("#result").html("");
  });
</script>
</head>
<body>
<center><img src="http://192.168.1.70:8080/?action=stream" width="752"></center>
<form action="mycamera.php" method="post" id="newForm">
<div class="result"> </div>
<table
style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
  <tr>
    <td style="text-align: center;">Turn Camera Left/Right</td>
    <td style="text-align: center;">Turn Camera Up/Down</td>
</tr>
<tr>
<td style="text-align: center;"><button name="Left">Left</button></td>
<td style="text-align: center;"><button name="Up">Up</button></td>
<td style="text-align: center;"><button name="RightIncrement">Right Increment</button>                </td>
</tr>
<tr>
<td style="text-align: center;"><button name="Right">Right</button></td>
<td style="text-align: center;"><button name="Down">Down</button></td>
<td style="text-align: center;"><button name="LeftIncrement">Left Increment</button>  </td>
</tr>
<tr>
<td style="text-align: center;"><button name="CentreLR">Centre L/R</button></td>
<td style="text-align: center;"><button name="CentreUD">Centre U/D</button></td>
<td style="text-align: center;"><button name="Reboot">Reboot</button></td>
</tr>
</tbody>
</table>
<div class="form_result"> </div>   
</form>
</body>
</html>

and this is the .php file:

<?php 
if (isset($_POST['Left']))
{
exec('echo 1=60 > /dev/servoblaster');  
}
if (isset($_POST['Up']))  
{
exec('echo 0=60 > /dev/servoblaster');
}
if (isset($_POST['Right']))   
{
exec('echo 1=240 > /dev/servoblaster');
}
if (isset($_POST['Down']))
{
exec('echo 0=240 > /dev/servoblaster');
}
if (isset($_POST['CentreLR']))
{
exec('echo 1=150 > /dev/servoblaster');
}
if (isset($_POST['CentreUD']))
{
exec('echo 0=150 > /dev/servoblaster');
}
if (isset($_POST['RightIncrement']))
{
exec('echo 1=+10 > /dev/servoblaster');
}
if (isset($_POST['LeftIncrement']))
{
exec('echo 1=-10 > /dev/servoblaster');
}
if (isset($_POST['Reboot']))
{
exec('sudo /sbin/shutdown -r now');
}
?>

Many thanks in advance for your kind help!

Regards,

Upvotes: 0

Views: 358

Answers (3)

Jay Blanchard
Jay Blanchard

Reputation: 34426

There are many edits that need to be made to your original code. The only change that we're making in the HTML is removing the form action -

HTML

<body>
    <center>
        <img src="http://192.168.1.70:8080/?action=stream" width="752">
    </center>
    <form action="" method="post" id="newForm">
        <div class="result"></div>
        <table style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
            <tbody>
                <tr>
                    <td style="text-align: center;">Turn Camera Left/Right</td>
                    <td style="text-align: center;">Turn Camera Up/Down</td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="Left">Left</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Up">Up</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="RightIncrement">Right Increment</button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="Right">Right</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Down">Down</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="LeftIncrement">Left Increment</button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="CentreLR">Centre L/R</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="CentreUD">Centre U/D</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Reboot">Reboot</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form_result"></div>
    </form>
</body>

In the PHP code we'll do a little tidy up, using a switch statement that is much more readable. We're testing $_POST['action'] each time:

<?php
switch ($_POST['action']) {
  case 'Left':
    exec('echo 1=60 > /dev/servoblaster');  
    break;
  case 'Up':
    exec('echo 0=60 > /dev/servoblaster');
    break;
  case 'Right':
    exec('echo 1=240 > /dev/servoblaster');
    break;
  case 'Down':
    exec('echo 0=240 > /dev/servoblaster');
    break;
  case 'CentreLR':
    exec('echo 1=150 > /dev/servoblaster');
    break;
  case 'CentreUD':
    exec('echo 0=150 > /dev/servoblaster');
    break;
  case 'RightIncrement':
    exec('echo 1=+10 > /dev/servoblaster');
    break;
  case 'LeftIncrement':
    exec('echo 1=-10 > /dev/servoblaster');
    break;
  case 'Reboot':
    exec('sudo /sbin/shutdown -r now');
    break;    
} 
?>

Lastly the jQuery - 

$(document).ready(function () {
    $('#newForm').on('click', 'button', function (e) {
        e.preventDefault();
        var action = $(this).attr('name'); // get the button name
        console.log(action); // just for testing

        $.ajax({
            type: "POST",
            url: "mycamera.php",
            data: {
                action: action // note that we're sending something that can be used in $_POST
            },
            success: function (res) {
                $("#result").html(res);
            }
        });
    });

    $(".back").on("click", function () {
        $("#result").html("");
    });
});

You were pretty close, but some syntax issues and some addition of inputs (you didn't have any in the form) that you tried to use as data for your PHP submission didn't exist. There was no form submission, but the button act the same as a submit and we were not stopping their default action.

Upvotes: 1

Janaka
Janaka

Reputation: 96

I think you need to wrap your event listener inside a $(document).ready(function(){ //your code }); Or place your script tag after the form element. Issue is when your script runs, it first executes the event binding then render the #newForm DOM object. To overcome this you need to make sure DOM elements are already loaded to the browser before binding events.

Secondly you need to add e.preventDefault(); to avoid page refresh (default form submission event).

Try it like this,

$(document).ready(function(){
    $("#newForm").on("submit", function(e){
       e.preventDefault();
       //your code
    });
});

Upvotes: 1

rjdown
rjdown

Reputation: 9227

You need to stop the form submission from triggering and you are also not waiting for the dom to fully load before binding events to elements. So, replace your <script> with this:

<script>
    // wait for the DOM to fully load
    $(document).ready(function() {
        $("#newForm").on("submit", function(e) {
            // disable the default action
            e.preventDefault();
            var $inputs = $('#newForm :input'),
                    values = {};
            $inputs.each(function() {
                values[this.name] = this.value;
            });

            $.ajax({
                type: "POST",
                url: "mycamera.php",
                data: values,
                success: function(res) {
                    $("#result").html(res);
                    $("input[type=text]").val("");
                }
            });

            return false;
        });

        $(".back").on("click", function() {
            $("#result").html("");
        });
    })
</script>

More info about preventDefault here. More info about .ready here.

Upvotes: 2

Related Questions