How to send more data with formdata via AJAX

Question

I want to send a multiple form-data via jquery ajax to PHP. What should I do if I want to send more values to PHP using the data-value-1="value1" and data-value-2="value2" into each input?

HTML

<form action="url.php">
<div><input type="text" class="title-input" name="titleInput" placeholder="title"></div>
<div><input id="file_input" name="files[]" class="img" type="file"/></div>
<input name="submit" type="submit" value="upload"/>
</form>

JavaScript

$(function){
  var form_data = new FormData(this); //Creates new FormData object
        var post_url = $(this).attr("action"); //get action URL of form

        //jQuery Ajax to Post form data
        $.ajax({
          url : post_url,
          type: "POST",
          data : form_data,
          contentType: false,
          cache: false,
          processData:false,
          xhr: function(){
            //upload Progress
           }

});

everything is good until I need this to send more values with data-val into the input tag.

<div>
  <input type="text" 
         class="title-input" 
         name="titleInput" 
         placeholder="title" 
         data-value-one="val1" 
         data-value-two="val2">
</div>

how can I send these values with form-data?

Answer 1

Loop over elements that have data attributes, then iterate the data object that jQuery returns using data() and append() the key/values to the FormData object

 $('form').submit(function(evt) { evt.preventDefault() var form_data = new FormData(this); $(this).find(':input').filter(function() { return $(this).data() }).each(function() { $.each($(this).data(), function(k, v) { form_data.append(k, v) }); }); console.log(Array.from(form_data.entries())) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="url.php"> <div> <input name="titleInput" value="title test" data-value-one="val1" data-value-two="val2" > </div> <div><input id="file_input" name="files[]" class="img" type="file" /></div> <input name="submit" type="submit" value="upload" /> </form>