CODEWITHSUNDEEP
ajax
Jung
Jung

Reputation: 207

input(file) and input (text) send with one ajax

html

<body>
    <form method="post" action="" id="dataForm" enctype="multipart/form-data">
        <input type="text" id="textSelector"/>
        <input type="file" id="fileSelector"/>
        <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
    </form>
</body>

js/ajax

var fileVar = null;// global var to store file info
$(document).ready(function(){
    $('#dataForm').on('submit', function(e) {
        e.preventDefault();
        SendData();
    });

    $('#fileSelector').on('change',function(ev){
        fileVar = null;
        fileVar = new FormData();
        $.each(ev.target.files, function(key, value)
        {
            fileVar.append(key, value);                 
        });
    });
});

function SendData(){
    var formData = new FormData($("#dataForm")[0]);
    // should i add the filerVar like this ?
    // formData.append("Image", fileVar);

    $.ajax({
        type: "POST",
        url: "checkinput.php",//you need to add this '?files part' to URL
        data: formData,// use fileVar here now
        cache: false,
        processData: false, 
        // contentType: false, 
        success:function(data)
        {
            console.log(data);  
            console.log("success");
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log("failure");
        }
    });
}

php

print_r($_POST);
print_r($_FILES);

my intention is to send input(file) and input(text) in one ajax , i can get the input file value if i add ajax data with fileVar , but i cant get my input text value i have no idea why , can anyone tell me what i did wrong ?

var formData = new FormData($("#dataForm")[0]) is the way to get both to one ajax but i cant get any input text value.

anyone can teach me how to make this work ?

Upvotes: 0

Views: 142

Answers (1)

Than Ngo Hoai
Than Ngo Hoai

Reputation: 469

I think you need to specify input name attributes:

<body>
    <form method="post" action="" id="dataForm" enctype="multipart/form-data">
        <input type="text" id="textSelector" name="textSelector"/>
        <input type="file" id="fileSelector" name="fileSelector"/>
        <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
    </form>
</body>

Hope that helps.

Upvotes: 1

Related Questions