Ajax output brings duplicate PHP upload form on web page - php

Question

I'm trying to integrate a progress bar available at http://malsup.com/jquery/form/progress.html into a php upload form. It works well except it returns duplicate upload form on the same page after submitting the first form. See the screen shots of form below.
Form Screen Shot
The ajax call is following:
<script type="text/javascript">
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('#Myform').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
})();
html part can be represented as:
<form id="#Myform" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" enctype="multipart/form-data">
<input type="file" name="DocFile"/>
<input type="submit" id="upload" value="Upload"/>
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
I store form validation messages in PHP array and output these to a predefined div in my upload script.
xhr.responseTextoutputs the PHP validation messages in #status div but it causes the appearance of duplicate form as per the attached screen shot.
Any idea whats going wrong here?

Answer 1

Your PHP-Function is (based on action="<?php echo $_SERVER["PHP_SELF"]; ?>") on the same page as your other html (also your upload form amongst other). The AJAX-Functionality basically just loads the linked file with the form parameters and uses the whole content after the PHP execution as the result. In you case, the content includes your response but also your form.
Now how to solve this problem? The easiest way would be, to define your PHP in another file and link to that. For that, add action="upload.php" to your <form>-Tag. Then create a new PHP-File:
upload.php
if(isset($_POST)) {
...
echo "47";
}