-3

I have found my errors via console log in chrome and remove them but my problem now is that it doesn't call the php script that supposed to process the data.

<legend><strong>Select type of machine model</strong></legend>
<form id="form1" name="form1" method="post" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" >
<option value="" selected="selected">Choose..</option>
<option value="machine1.php">Machine 1</option>
<option value="machine2.php">Machine 2</option>
</select>
</fieldset>
<fieldset>
    <legend><strong>Select a file to upload</strong></legend>       
    <input type="file" id="files" name="files[]" size="40" multiple="multiple" />
     <br />
      <p></p>
       <input type="submit" value="Upload File" id="upload"/>
       <br />
        <br />
    </form>
    <div id="information">
    </div>
</fieldset>
<fieldset>
<legend><strong>Uploaded Files</strong></legend>
    <div id="uploaded"></div>
</fieldset>
<script type="text/javascript">
jQuery(document).ready(function(e){
jQuery('#upload').click(function(e){


    var formData = new FormData($('form')[0]);
    var page = $("#machine option:selected").val();

    //check the output here
    e.preventDefault();
    console.log("formData",formData)

    $.ajax({
        url: page,
        type: 'POST',
        data: formData,
        cache: false,
        contenType: false,
        processData: false,
        success: function(data){
            $("#information").empty();
            $("#information").append(data);
        }
    });
});

});

It's becoming my dilemma and I have been searching google for 3 straight days now and I found some useful codes but when I apply it to mine, it does not work even errors I have none. Thanks in advance.

I finally got the answer to my question, thanks for the help that you gave me..

$(document).ready(function(){
$("#form1").submit(function(e){
var formObj = $(this);
var page = $("#machine option:selected").val();

if(window.FormData !== undefined)
{
var formData = new FormData(this);

    $.ajax({
        url: page,
        type: 'POST',
        data: formData,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){
        $("#uploaded").empty();
        $("#uploaded").append(data);

}
});
e.preventDefault();

}
});

});
SilverRay
  • 331
  • 2
  • 7
  • 23

2 Answers2

0
$( document ).ready(function(){
    function eventListener(){
        $('#upload').click(function(){
            event.preventDefault();
            var formData = new FormData($('form')[0]);
            var page = $("#machine option:selected").val();
            $.ajax({
                url: page,
                type: 'POST',
                data: { formData : formData },
                cache: false,
                contenType: false,
                processData: false,
            }).done(function(data){
                console.log(data);
                $("#information").empty();
                $("#information").append(data);
            });
        });
    }
eventListener();
}

With that you can access your formData variable on PHP with $_POST["formData"]. But it's hard to help you further without really knowing what you want to achieve. Give us more informations please and tell us what your "data" should return and returns in fact in console. Hope I could help.

Y.Hermes
  • 449
  • 5
  • 22
  • As you can see from my code that I want to submit via ajax the uploaded files then select which php process to be executed based on the machine type... – SilverRay Dec 15 '15 at 09:10
  • Have you tried my code? I'm not sure but it's possible that your script don't get started. That's maybe the reason why you don't get any result or error. Use the $( document ).ready(function(){ function eventListener(){ "your onclick function here" } } to get it started. – Y.Hermes Dec 15 '15 at 09:14
  • Sorry for the delay response but I will try it now. – SilverRay Dec 16 '15 at 00:14
  • Sorry but I tried it and the same problem no output no error.... – SilverRay Dec 16 '15 at 00:23
  • I edited my question and help me close this question of mine. – SilverRay Dec 16 '15 at 03:15
  • So was it the answere? If no, what does the console output? – Y.Hermes Dec 16 '15 at 13:56
0

Check your formdata, this is not a solution but will help you debug your own code.

<script type="text/javascript">
$(document).ready(function(e){
    $('#upload').click(function(e){


        var formData = new FormData($('form')[0]);
        var page = $("#machine option:selected").val();

        //check the output here
        e.preventDefault();
        console.log("formData",formData)

        $.ajax({
            url: page,
            type: 'POST',
            data: formData,
            cache: false,
            contenType: false,
            processData: false,
            success: function(data){
                $("#information").empty();
                $("#information").append(data);
            }
        });
    });
})

lukesUbuntu
  • 527
  • 2
  • 12
  • 22