AJAX form submission with php and jquery

Question

I have looked at everything on here that I can find and I just can't figure out why I cannot perfect this code. What I am trying to do is allow users to delete something that they posted on my site without doing a page refresh. The form is going to be passed to a php file that will modify my MySQL DB. I am new to ajax and have only messed around with PHP for a short time as well.

form:

<form class='status_feedback' id='delete_status' onsubmit='delete_status()' action=''>
<input type='hidden' name='status_id' id='status_id' value='$status_id'/>
<input type='submit' value='X'/>
</form>

delete_status()

function delete_status(){
$.ajax({  
type: "POST",  
url: "/scripts/home/php/delete_status.php/",  
data: status_id,  
success: function() {  
//display message back to user here  
}  
});  
return false;
}

delete_status.php

<?php
$con=mysqli_connect("localhost","USER","PASSWORD","DB");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$status_id = $_POST['status_id'];
mysqli_query($con,"UPDATE status SET visibility = 'hidden' WHERE id = $status_id");



?>

at this point, all that happens when I strike the delete_status() function is my page refreshes and adds ?status_id=194 (when I click on status #194) to the end or my url.

Any help would be awesome. I have been researching for several days.

Nemo · Accepted Answer · 2014-01-19 06:51:31Z

Change your HTML, Ajax and php a little.

HTML

Add this code:

      <body>

         <form class='status_feedback' id='delete_status' >
          <input type='hidden' name='status_id' id='status_id' value='$status_id'/>
          <input type='button' id='x_submit' value='X' />
         </form>

        <script>
           $('#x_submit').on("click",function(){

            var status_id= $('#status_id').val();

            //Delete the alert message if you want.
            alert("Check your status id :"+status_id);

               $.ajax({  
                      type: "GET",  
                      url: "/scripts/home/php/delete_status.php?",  
                      data: {status_id:status_id}, 
                      dataType:'JSON',
                      success: function(json) {  
                             //display message back to user here 
                              alert(json[0].response); 
                           }  
                     }); 

          });
        </script>

PHP:

   <?php
        header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Methods: GET, POST'); 
        header('Content-type: application/json');

        $con=mysql_connect("localhost","USER","PASSWORD","DB");
      // Check connection
     if (mysql_connect_errno())
           {
            echo "Failed to connect to MySQL: " . mysql_connect_error();
           }

           $status_id = $_GET['status_id'];

           $result = mysql_query("UPDATE status SET visibility = 'hidden'
                     WHERE id = '$status_id'");

           if(! $result )
                 {
                    $data[]=array('response'=>"Unable to insert!"); 
                 }
           else

                 {

                 $data[]=array('response'=>"Data successfully inserted into the database!");

                  }

          $json_encode = json_encode($data);

          print("$json_encode");

   ?>

Hope it will work.

that looks like it would be pretty easy to implement. I will try it when I work on my project tonight. I know this is not the question but is there somewhere I can read about JSON. I really like to know what the code does before I implement it. Just to be a good programmer. Thank you.

epascarello · Accepted Answer · 2014-01-19 02:53:45Z

0

You are not cancelling the form submission

onsubmit='delete_status()'

needs to be

onsubmit='return delete_status()'

and data: status_id, looks wrong unless you have a variable defined somewhere else

answered Jan 19, 2014 at 2:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

4 Comments

user2930376 Over a year ago

I added that and it does not change it. Could it be that the form is actually echo'ed from a php file? Thank you.

user2930376 Over a year ago

I understand what you mean about status_id. If I want the value that is posted to be the what is passed through in $status_id what should the data: be? Thank you.

epascarello Over a year ago

data : { "name" : "value" }

user2930376 Over a year ago

Thanks for your help. I will try this also when I get back to my project.

Collectives™ on Stack Overflow

AJAX form submission with php and jquery

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related