I cant get ajax variable to other PHP page-CodePudding

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 ><?php echo $take['student_name'] ?></td>
      <td> 
<a  href="index.php?page=edit-student-data&student_id=<?=$take['student_id'] ?>"> <i  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 >
                        <label for="exampleFormControlInput1">Student Name</label>
                        <input type="text"  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>

CodePudding user response：

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.

CodePudding user response：

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  href="index.php?page=edit-student- 
data&student_id=<?=$take['student_id'] ?>"> <i  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  student-id=<?php echo '5' ?>><?php echo "Test" ?></td>
      <td> 
<a  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 >
<label for="exampleFormControlInput1">Student Name</label>
<input type="text"  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.