I cant get ajax variable to other PHP page

Question

First of all, im sorry because im new on ajax and still learning it. I'm using google translate on my website page and i want to translate student_name from original text/string to arabic string. It is from table and i want to pass it to edit-student-data.php page. I have successfully get the arabic string and declare it to variable. And then, when i want to pass this variable to edit page the variable i cant get ajax value. Anyone can help me?

PHP

<table>
  <thead>
   <th>Student name</th>
  </thead>
  <tbody>
    <tr>
      <td class="student_name"><?php echo $take['student_name'] ?></td>
      <td> 
<a class="btn btn-warning editButton" href="index.php?page=edit-student-data&student_id=<?=$take['student_id'] ?>"> <i class="fas fa-pencil-alt" style=""></i> Edit</a>
      </td>
    </tr>
  </tbody>
</table>


 <script>
                  $(document).on('click', '.editButton', function(e) {
                    var tr = $(this).closest("tr"); 
                    var student_name_arabic = tr.find(".student_name").text();
                    alert(student_name_arabic); //SUCCESS
                    $.ajax({
                        type: 'POST',
                        url: 'edit-student-data.php',
                        data: { ar_name: student_name_arabic },
                        success: function(data)
                        {
                            $('#form-control').html(data);
                        }
                    });
                   });
                </script>

Another PHP Page (edit student data page)

<div class="form-group">
                        <label for="exampleFormControlInput1">Student Name</label>
                        <input type="text" class="form-control" name="student_name"  value="<?= $take['student_name'] ?>">

                        <?php 
                        $ar_name = $_POST['ar_name'];
                        echo"<script>alert('$ar_name');</script>"; 

                        //I can't get arabic name value on alert. please help me:(
                        ?>
                      </div>

You need to convert data from php to javascript. See [How do I pass variables and data from PHP to JavaScript?](https://stackoverflow.com/questions/23740548/how-do-i-pass-variables-and-data-from-php-to-javascript) — Lam Tran Duc, Dec 14 '21 at 09:38
@LamTranDuc tran Duc i write the javascript code is on the student-database.php page — Abhista R, Dec 14 '21 at 09:52
The JS code you pull from the AJAX may not be executed (for security). But you don't really need to alert it, surely? Try `` or similar, instead. Then it'll just show on the screen. — ADyson, Dec 14 '21 at 09:57
my problem is the error always said undefined index. Is the error because i use href with get parameter on my edit button? @ADyson — Abhista R, Dec 14 '21 at 10:01
Ah yes, that would cause the browser to follow that link, and forget about the AJAX. If you're trying to do AJAX then you don't need a hyperlink. Just use a regular ` — ADyson, Dec 14 '21 at 10:10

score 0 · Answer 1 · answered Dec 14 '21 at 10:04

Your jQuery selector here:

success: function(data)
 {
    $('#form-control').html(data);
 }

is for an id, so place

<div id='form-control'></div>

into your first code after the table, which gives the AJAX return data somewhere to go.

If you meant to use .form-control for a class, that won't work because you reference the element before it exists.

score 0 · Accepted Answer · answered Dec 14 '21 at 12:51

You need to get more understanding about GET & POST, how we need to pass the values from one file to another file.

First, from this code you are trying to pass the values to the PHP file "edit-student-data.php", GET as well POST.

From this line, you are trying to pass values to the file via the URL (It's know as GET call)

<td> 
<a class="btn btn-warning editButton" href="index.php?page=edit-student- 
data&student_id=<?=$take['student_id'] ?>"> <i class="fas fa-pencil- 
alt" style=""></i> Edit</a>
</td>

From this AJAX code, you are trying to pass the value to through the POST call, as the type you mentioned in the code

$.ajax({
type: 'POST',
url: 'edit-student-data.php',
data: { ar_name: student_name_arabic },
success: function(data)
{
    $('#form-control').html(data);
}
});

No Need to specify anything in the href, just javascript:void(0).
If you want to pass, page & student to the edit page then you can pass via post params
In the file edit-student-data.php , you have used the variable $take['student_name']. This is undefined index for that page. If you want to use the student_name in that file. You need to $_POST['ar_name'], this is the name you have specified in the ajax params

Note: Instead of static value for name & id, You can specify the dynamic value

PHP code:

<table>
  <thead>
   <th>Student name</th>
  </thead>
  <tbody>
    <tr>
      <td class="student_name" student-id=<?php echo '5' ?>><?php echo "Test" ?></td>
      <td> 
<a class="btn btn-warning editButton" href="javascript:void(0)"> Edit</a>
      </td>
    </tr>
  </tbody>
</table>

<!-- If necessary you can add this line -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).on('click', '.editButton', function(e) {
var student_name_arabic = $(".student_name").text();
var student_id_arabic = $(".student_name").attr("student-id");
// alert(student_name_arabic); //SUCCESS

$.ajax({
    type: 'POST',
    url: 'edit-student-data.php',
    data: { ar_name: student_name_arabic, ar_id: student_id_arabic },
    success: function(data)
    {
        alert(data);
        $('#form-control').html(data);
    }
});
});
</script>

File: edit-student-data.php

<div class="form-group">
<label for="exampleFormControlInput1">Student Name</label>
<input type="text" class="form-control" name="student_name"  value="<?= $_POST['ar_name'] ?>">

<?php 
$ar_name = $_POST['ar_name'];
echo"<script>alert('$ar_name');</script>"; 

//I can't get arabic name value on alert. please help me:(
?>
</div>

I hope this would useful.

so informative, thanks in advance mate<3 – Abhista R Dec 14 '21 at 16:56 — Abhista R, Dec 14 '21 at 16:56

I cant get ajax variable to other PHP page

2 Answers2