как отправить данные с AJAX из полей ввода в PHP

Question

В настоящее время у меня есть этот HTML:

<td>
   <input type="hidden" class="old_name" name="old_name" value="folder1/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name" name="old_name" value="folder2/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name" name="old_name" value="folder3/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td>

Мой JQuery Ajax выглядит так:

// AJAX for rename files        
    $(document).on('click' , '.rename' , function() {       
        var old_name = $(".old_name").val(); // getting old value from input 
        var new_name = $(".new_name").val(); //getting new value from input   

        $.ajax({  
            url:"",  
            method:"POST",  
            data:{ 
                    old_name:old_name , 
                    new_name:new_name  

                },  
            success:function(data){
                // here comes echo
            }  
       });  
    });

Мой php:

  if( isset($_POST["old_name"]) && isset($_POST["new_name"]) )  {

 echo $_POST["old_name"];
 echo $_POST["new_name"];

Первая проблема : при нажатии на кнопку Переименовать вторую, она повторяет old_name из первой кнопки. Так, как я могу поймать второе значение old_name, когда нажимаю на вторую кнопку Rename?

Вторая проблема : php не отображает $_POST["new_name"]

Как мне добиться этого без использования формы?

Answer 1

Первое решение проблемы использовать другое имя (в вашем конкретном случае другое имя класса) для другого ввода

<td>
   <input type="hidden" class="old_name1" name="old_name" value="folder1/image.jpg" />                                       
   <input  type="text" class="new_name1" name="new_name" value="" />
   <button type="submit" class="rename1">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name2" name="old_name" value="folder2/image.jpg" />                                       
   <input  type="text" class="new_name2" name="new_name" value="" />
   <button type="submit" class="rename2">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name3" name="old_name" value="folder3/image.jpg" />                                       
   <input  type="text" class="new_name3" name="new_name" value="" />
   <button type="submit" class="rename3">Rename</button>
</td>

Новая функция JS будет

$(document).on('click' , '.rename1' , function() {       
    var old_name = $(".old_name1").val(); // getting old value from input 
    var new_name = $(".new_name1").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});
$(document).on('click' , '.rename2' , function() {       
    var old_name = $(".old_name2").val(); // getting old value from input 
    var new_name = $(".new_name2").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});
$(document).on('click' , '.rename3' , function() {       
    var old_name = $(".old_name3").val(); // getting old value from input 
    var new_name = $(".new_name3").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});

Решение второй проблемы

вы, вероятно, оставляете поле пустым