How can I combine two ajax functions in one function?

Question

I have ajax code which can post name and I have another ajax which can post image I need to combine those two functions in order to have one function which can post both name and image

Below codes used to post image

<script>
$(document).ready(function(){

    $("#but_upload").click(function(){

        var fd = new FormData();
        var files = $('#file')[0].files;
        
        // Check file selected or not
        if(files.length > 0 ){
           fd.append('file',files[0]);

           $.ajax({
              url: 'upload.php',
              type: 'post',
              data: fd,
              contentType: false,
              processData: false,
              success: function(response){
                 if(response != 0){
                    $("#img").attr("src",response); 
                    $(".preview img").show(); // Display image element
                 }else{
                    alert('file not uploaded');
                 }
              },
           });
        }else{
           alert("Please select a file.");
        }
    });
});
</script>

And below codes used to post name

<script type="text/javascript">
function clickButton(){
var name=document.getElementById('name').value;
$.ajax({
        type:"post",
        url:"upload.php",
        data: 
        {  
           'name' :name
        },
        cache:false,
        success: function (html) 
        {
           alert('Data Send');
           $('#msg').html(html);
        }
        });
        return false;
 }
</script>

How can I combine above codes in order to use only one url "upload.php", this means upload.php will insert name in database and save image in folder while click save button, that's why I need to combine the codes

Please anyone can help me

Answer 1

You literally combine them.

You can use your first function and do the following:

var fd = new FormData();
var files = $('#file')[0].files;
fd.append('name', $("#name").val();

that is it. And on the other side (backend) you just ask for this name:

$name = $_POST['name'];