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 ?

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 ?

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Nov 15, 2016 at 14:24 prasanth 22.5k44 gold badges3333 silver badges5656 bronze badges asked Nov 15, 2016 at 13:36 roboert ferroboert fer 6911 silver badge77 bronze badges 7

• 1 It should already be in your form data, but make sure you use the form with the formData() call: new formData($('form')[0]). Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server? – Jay Blanchard Commented Nov 15, 2016 at 13:37
• @JayBlanchard OP creates an empty FormData object – Rory McCrossan Commented Nov 15, 2016 at 13:38
• Ack! Good catch @RoryMcCrossan – Jay Blanchard Commented Nov 15, 2016 at 13:38
• 1 Please also do $("#loading_upload_threads_image").hide() / .show() – mplungjan Commented Nov 15, 2016 at 13:39
• 1 setTimeout(function() { $("#loading_upload_threads_image").show()},3000); – mplungjan Commented Nov 15, 2016 at 13:58

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

You can use the append() method to add any data you want to the FormData object - as your ment 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]);

You can do it like this:

HTML Code:

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

JS Code:

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

$.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";
    }
});

and in PHP you can access it as:

$test = $_POST['test'];

Hope this helps!