How to send value input type text via ajax post?

Question

I have input type text like this

<input type="text" id="test" value="">

And i have ajax post function like this.

$(document).ready(function() {
    $('#summernote').summernote({
        height: 300,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,                  // set focus to editable area after initializing summernote
        callbacks: {
            onImageUpload: function(files) {
                sendFile(files[0]);
            }
        }
    });   

    function sendFile(file, editor, welEditable) {
        document.getElementById("loading_upload_threads_image").style.display = "block";
        data = new FormData();
        data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
        $.ajax({
            data: data,
            type: "POST",
            url: "threads_image_upload.php",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                $('#summernote').summernote('editor.insertImage', url);
                document.getElementById("loading_upload_threads_image").style.display = "none";
            }
        });
    }
});

I want to know how to send value from id="test"to my ajax post ?

Answer 1

You can use the append() method to add any data you want to the FormData object - as your comment event says. Try this:

data = new FormData();
data.append("file", file);
data.append('test', $('#test').val());

Alternatively, if you want to send all the data in your form then you can provide the form element to the FormData constructor. Note that the items will be given the name of the input as the key.

var data = new FormData($('form')[0]);