Run php script with AJAX and POST

Question

I'm quite new to AJAX. I did some of them with javascript that returns HTML, but I'm struggling with something that I think should be really simple.

I have a header with an inline element:

<header>
  <span class="right_alignment">
    <a id="delete_work" href="">
      <input id ="work_id" type="hidden" value="<?php echo $work_id ?>"/>
      <i class="fa fa-plus" aria-hidden="true">
      </i>
    </a>
  </span>
</header>

I want to send $work_id to a PHP script that executes a MySQL query that deletes this record in the database. It has to be a POST request, and as it is an inline element I can't use a form. So AJAX is the way. This is my try:

$( document ).ready(function() {
  $("#delete_work").click(function () {
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: $('#work_id').val(),
    });
  });
});

For now script-delete-work.php don't worry me, so is as simple as:

$edition_id = $_POST['work_id'];
echo $work_id;

But this setup doesn't work. I know that it is the simplest form of an AJAX, but I can't figure how to send the data or what is failing. Any help?

Thanks!

EDIT -- Ok, I solved the data thing. What I have now is:

HTML

<span class="span_edit_right">
  <a id="delete_work" href="">
    <input id="work_id" type="hidden" value="<?php echo $work_id; ?>"/>
        <i class="fa fa-trash-o" aria-hidden="true">
        </i>
  </a>
</span>

Script:

$( document ).ready(function() {
  $("#delete_work").click(function () {
    var val = $('#work_id').val();
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: { "work_id" : val },
      success: function ()
      {
        alert("works!");
      }
    });
  });
});

PHP

<?php echo $_POST['work_id'];

When I click on #delete_work it returns the alert "works", and reload the page, but doesn't show the page with <?php echo $_POST['work_id'];.

Try data: {work_id: $('#work_id').val()} and get $_POST['work_id'] in php script. — Ivan Bolnikh
– Ivan Bolnikh, Commented Jul 29, 2017 at 11:49
add tihs alert(val); after var val = $('#work_id').val(); , findout variable has value or not. — Asif Thebepotra
– Asif Thebepotra, Commented Jul 29, 2017 at 12:51

Virb · Accepted Answer · 2017-07-29 11:51:07Z

2

Use this code please

$( document ).ready(function() {
  $("#delete_work").click(function () {
    var val = $('#work_id').val();
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: { "work_id" : val },
      success: function () 
      {

      }

    });
  });
});

And on your server side just

echo $_POST['work_id'];

edited Jul 29, 2017 at 11:51

Virb

1,5781 gold badge16 silver badges25 bronze badges

answered Jul 29, 2017 at 11:48

Kamran Jabbar

8781 gold badge8 silver badges21 bronze badges

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

1 Comment

user7499416 Over a year ago

Thanks, I update the question with all this. But still doesn't work!

user7499416 · Accepted Answer · 2017-07-29 12:45:47Z

2

Solved!

The problem is apparently that with AJAX you are not going to be sent to another PHP page, so I couldn't see the echo $_POST['work_id'];. But now it works, it was the data problem…

Actual code is:

<span class="span_edit_right">
    <a id="delete_work" href="">
        <input id="work_id" type="hidden" value="<?php echo $work_id; ?>"/>
        <i class="fa fa-trash-o" aria-hidden="true">
        </i>
    </a>
</span>

Script:

$( document ).ready(function() {
  $("#delete_work").click(function () {
    var val = $('#work_id').val();
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: { "work_id" : val },
      success: function ()
      {
        alert("works!");
      }
    });
  });
});

Thanks!

answered Jul 29, 2017 at 12:45

user7499416

1 Comment

Billal BEGUERADJ Over a year ago

Look to my powerful upvote which costs +100 points everywhere. I am a superman !

crak · Accepted Answer · 2017-07-29 11:51:26Z

0

use the ajax success function. and return $edition_id instead of work_id

success: function(work_id)

answered Jul 29, 2017 at 11:51

crak

481 silver badge13 bronze badges

1 Comment

NewToJS Over a year ago

Don't you think providing an example would make this answer worthy of posting? So far this is more like a comment than a given solution.

Marouane Sihad · Accepted Answer · 2017-07-29 11:53:28Z

0

It's just that you don't get the value of the checked box.

You forgot ; in value="<?php echo $work_id; ?>".

answered Jul 29, 2017 at 11:53

Marouane Sihad

13610 bronze badges

Comments

Farsay · Accepted Answer · 2017-07-29 12:54:07Z

0

You are not sending data correctly. You should pass data in javascript object form i.e {'parameter_name':parameter_value} so below is the code.

$( document ).ready(function() {
  $("#delete_work").click(function () {
    var wrkId = $('#work_id').val();
    $.ajax({
      url: 'scripts/script-delete-work.php',
      type: 'POST',
      data: {'work_id':wrkId},
    });
  });
});

Or

 $( document ).ready(function() {
  $("#delete_work").click(function () {
    var wrkId = $('#work_id').val();
    $.post('scripts/script-delete-work.php',{'work_id':wrkId},function(response){
    console.log(response);
    });
  });
});

edited Jul 29, 2017 at 12:54

answered Jul 29, 2017 at 12:10

Farsay

3121 silver badge9 bronze badges

1 Comment

Farsay Over a year ago

okay right click and click on inspect element and click on console tab and see if there any js errors. so that we could get the solution. i just updated my answer maybe another one will work for you

Collectives™ on Stack Overflow

Run php script with AJAX and POST

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related