Progress bar of submitted form ($_SERVER["PHP_SELF"])

Question

I'm trying to find out how to make a progress bar visualising the progress of the form being submitted. Now I find alot of articles where data is being submitted through AJAX/jQuery to a separate php file where the data is being parsed.

But how do I do this when the action attribute of the form is $_SERVER["PHP_SELF"] and the data is being processed with php in the same file. (After the submit button is pressed, the page refreshes.)

Example:

<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])){
    // some validation code combined with error_message array here
    // uploading data to server and database here
}
?>

...

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" id="aaa" enctype="multipart/form-data">
    <input type="text" name="title" id="title" size="55" maxlength="55" required>
    <textarea name="description" id="description" maxlength="155" rows="3" cols="55" required></textarea>
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="submit" value="Submit" name="submit" id="submit">
</form>

You need to use AJAX and XHR object. It doesn't matter where submit URL is :). You can initiate refresh manually after the form fire success event. — Adam Azad, Aug 03 '16 at 11:19
`$_SERVER["PHP_SELF"]` method reloads the current page with post data. You need to create another endpoint to submit your data through ajax. Meanwhile your data is loading you can show progress bar. — The_ehT, Aug 03 '16 at 11:26
The above two comments are incorrect. There are a few awkward ways of doing this without ajax, but they are really just old hacks dating from a time before ajax file uploading was widely supported. All still require the use of javascript in some way - are you trying top support an ancient browser? If not, ajax file upload is the best solution by far — Steve, Aug 03 '16 at 11:29
@Steve I'm not trying to support an ancient browser. I'm just trying to find out how to code it. — Thoaren, Aug 03 '16 at 11:32
@Steve Do you mean the best solution by far by submitting the data through Ajax to a different php parse file to be able to visualize the progress? — Thoaren, Aug 03 '16 at 11:51
@Thoaren you dont need to post to a seperate file, thats optional, but you do need to post the file via ajax. For an idea how to capture progress look at the second answer here: http://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery — Steve, Aug 03 '16 at 12:58
@Steve I'm struggling to capture the formdata to implement in the code you provided through the link you gave me. Also how do I visualize the progress bar combined with that code? — Thoaren, Aug 03 '16 at 15:59

score 0 · Answer 1 · answered Aug 16 '16 at 11:47

Use this ajax function to call The php script in other page

$('#loading_spinner').show();

    $.post('php_page.php',
{pickup:pickup,dropoff:dropoff,km:km},function(data){
        $('#fare').html(data);
         $('#loading_spinner').hide();
    });

on php page submit the form and return the data in fare div

set #loadingspinner css to

#loading_spinner { display:none; }

and use any gif image in img tag to show the spinner

<img id="loading_spinner" src="ajax-loader.gif">

on submit button use this

onclick="javaScriptFunction();"

and use that ajax part in javaScriptFunction()

This is the example of calculating KM between two points in google maps

Progress bar of submitted form ($_SERVER["PHP_SELF"])

1 Answers1