Div response in ajax php

Question

I have the following code in HTML AJAX. What I want is to get the echo results from the php script on the same page that the ajax called not generating blank pages. Please check my code below:

<form id="form1" name="form1" method="post" action="/" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" onChange='addaction(this.value)'>
<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">
function addaction(actionvalue){
$("#form1").attr("action",actionvalue);
};

Any help would be much appreciated.

The php script part:

set_time_limit(0);
if(isset($_FILES['files']))
{
foreach($_FILES['files']['tmp_name'] as $key => $tmp_name)
    {
        $file_name = $key.$_FILES['files']['name'][$key];
        $file_size = $_FILES['files']['size'][$key];
        $file_tmp = $_FILES['files']['tmp_name'][$key];
        $file_type = $_FILES['files']['type'][$key];

        if($file_size > 10000000) //10mb
        {
            echo "<script>alert('File exceeds file size')</script>";
        }

        if($file_type == "text/plain")
        {
            $i = 0;
             $file = fopen($file_tmp,"r");

             while(($data = fgetcsv($file, 1000, "\t"))!=FALSE)
             {
                if($i > 0)
                {
                    $data[0] = "";
                    $data[1] = "";
                    $data[3] = "";
                    $data[4] = "";
                    $data[5] = "";

                    unset($data[0],$data[1],$data[3],$data[4],$data[5]);
                     $line[] = $data;
                }
                $i++;
             }
             fclose($file);
             $j = 0;
             foreach($line as $value)
             {
                $newline = explode(" ",$value[6]);
                 $date  = trim($newline[0]);
                  $time = trim($newline[2]);
                   $newtime = date("H:i",strtotime($time));

                 try{
                    $query = $con->prepare("INSERT IGNORE INTO temp_logs(EmpID, ValidDate, ValidTime)VALUES(:id,:ddate,:time)");
                     $query->bindParam(':id',$value[2]);
                      $query->bindParam(':ddate',$date);
                       $query->bindParam(':time',$time);
                        $query->execute();
                 }
                 catch(PDOException $e){
                    echo $e->getMessage();
                     exit;
                 }
                 $j++;
                 echo $j . " row(s) processed.";

                 echo str_repeat(' ',1024 * 64);

                 flush();

                 sleep(0);
             }
        }
        echo "Process completed";
    }
}

I tried this code but it seems it doesn't work:

$('body').on('click','#upload',function(e){
e.preventDefault();
var page = $('#machine option:selected').val();
var formData = new FormData($(this).parents('form')[0]);

$.ajax({
    url: page,
    type: 'POST',
    xhr: function(){
        var myXhr = S.ajaxSettings.xhr();
        return myXhr;
    },
    success: function (data){
        alert("Data Uploaded: "+data);
    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
});
return false;
});

Answer 1

I understood that you want to post to an other script without reloading the page and show the results on the page?

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<form id="form1" name="form1" method="post" action="/" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" onChange='outputResults()'>
<option value="" selected="selected">Choose..</option>
<option value="1">Machine 1</option>
<option value="2">Machine 2</option>
</select>

<div id="responsecontent">
</div>

... rest of form here ...

<script type="text/javascript">
function outputResults() {
    var machineid = $('#machine').val();

    //optional for some sort of effect:
    $("#responsecontent").empty();
    $("#responsecontent").append('<div style="width: 100%; text-align: center;"><img src="img/loading.gif" /></div>');

    //posting the data to your php script and output the results in the div named 'responsecontent' above:
    setTimeout(function(){
        $.ajax({
            url: "YOUR_PHP_RESPONSE_SCRIPT_HERE.php",
            type: "POST",
            data: {machineid:machineid},
            success: function(data) {
                // Do stuff when the AJAX call returns:
                $("#responsecontent").empty();
                $("#responsecontent").append(data);
            }
        });
    }, 1000);
}
</script>

Answer 2

I found my solution by searching stackoverflow and have this code:

$(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();

}
});
});