how to send data with ajax from input fields to 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?

scaff · Accepted Answer · 2019-03-16 11:39:26Z

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

Collectives™ on Stack Overflow

how to send data with ajax from input fields to php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related