Getting jQuery variable to PHP in the same file without refreshing the page

Question

Thanks for reading. I have tried the answers in other similar questions but none have worked so far. I'm trying to UPDATE values inside a Table that is inside a form, so in the first part of the file is the isset "saveImport" which is the name of the a tag that I'm using to send the id thru the URL:

if (isset($_POST['saveImport'])) {

    $id = $_POST['id'];
 }

a tag:

<a name="saveImport" href="./?id=<?= $row['id']; ?>" class="saveImport btn btn-success col-xs">Save</a>

I do get the ID value in the URL but since is been updated in the same file I'm assuming it refreshes the page before the variable gets post thru AJAX:

<script type="text/javascript">
  $(document).ready(function() {
     $('.saveImport').click(function() {
         var imp_id = id.id;
         var imp_href = $(id).attr('href');

         alert(imp_href);
         $.ajax({
            url: "./",
            data: {id : imp_id},
            type: "POST",
            success:  function(data){
               alert(id);//send this ID to the PHP variable without 
                         //refreshing the file
            }
         });

    });

  });

I'm getting the class .saveImport because it's inside a Table which is displaying values from a Database so it's inside a while loop and if I use an ID it will cause conflict as the ID will repeat itself.

I already created the PHP function to UPDATE the Values which executes if the ISSET is true, so my real problem will be to execute the ISSET and inside grab the ID that was posted with AJAX so I can use the ID in the UPDATE function. Right now, if I click on the a tag, it sends the ID thru URL, the page refreshes but the value of the ID is not getting in the $id = $_POST['id];

I appreciate your time.

Looking at your JS code, the post data contains only id. Where does saveImport come from? Also, have you checked the values of the variables in JavaScript and PHP to see if they met your expectations? It could be a small thing.. — GolezTrol
– GolezTrol, Commented Aug 22, 2017 at 7:17
PHP is server side language. You cannot alter anything withour=t server request. You have to use ajax or refresh the page. Also <a> tag value will not be posted through form submit. — Niranjan N Raju
– Niranjan N Raju, Commented Aug 22, 2017 at 7:17

dpblnt · Accepted Answer · 2017-08-22 14:26:16Z

1

This should work.

Change the ajax url to your php file name (mine was t.php).

Replace 99 with your data from php. (id is used. href is not used)

<?php
if (isset($_POST['saveImport'])) {
    print_r( $_POST );
    exit;
 }
?>

<a name="saveImport" id='99' href="./?id=99" class="saveImport btn btn-success col-xs"'>Save</a>


<script type="text/javascript">
 $('.saveImport').click(function(event) {
     var imp_id = this.id;
     $.ajax({
        url: "t.php",
        data: {id : imp_id, saveImport: 1},
        type: "POST",
        success:  function(data){
           alert( data );//send this ID to the PHP variable without
                     //refreshing the file
        }
     });
     event.preventDefault();

});

</script>

edited Aug 22, 2017 at 14:26

answered Aug 22, 2017 at 9:06

dpblnt

414 bronze badges

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

3 Comments

Louys Patrice Bessette Over a year ago

That will output an error saying event is not defined.

dpblnt Over a year ago

True, event is undefined there, but works in chromium.

dpblnt Over a year ago

replace the event.preventDefault(); with return(false); that will work in FF too.

Louys Patrice Bessette · Accepted Answer · 2017-08-22 14:00:47Z

0

.preventDefault() will prevent the link from loading the target page... And then, ajax will proceed.

$('.saveImport').click(function(event) {
  event.preventDefault();

answered Aug 22, 2017 at 14:00

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Collectives™ on Stack Overflow

Getting jQuery variable to PHP in the same file without refreshing the page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related