how to send data with ajax from input fields to php - php

Question

I have currently this 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>
My jquery ajax looks like this:
// 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
}
});
});
My php:
if( isset($_POST["old_name"]) && isset($_POST["new_name"]) ) {
echo $_POST["old_name"];
echo $_POST["new_name"];
First problem: when click on Rename second button, it echos the old_name from first button. So how can i catch the second value old_name when click on second Rename button?
Second problem: php does not echo the $_POST["new_name"]
How can i achieve this without using a form?

Answer 1

First problem solution
use different name (in your specific case different class name ) for different input
<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>
new js function will be
$(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
}
});
});
Second problem solution
you probably leave the field empty