Filling out multi-page forms without registration - Uncompleted Entries - php

Question

Just a brief question on the correct way to approach this. I am allowing form posts to a database without user registration, where each post will be reviewed. However, the page will be a multi-page form including file uploads.
What do I do if the user goes through the first few pages of submitting the form, including uploading files, and then abandons the form submission.
How do I go about cleaning up the unneeded data and uploaded files, whilst still making sure I don't remove it if they are in the process of posting it.

Answer 1

I was dealing with similar issue. My situation was a little bit different. I needed to give an option for the user to post an advertise and in the same time to allow him to upload images.
I approached this by putting a hidden field in the form that was holding the uploaded image filenames. For the upload itself I used ready library dropzone.js, as you already experience the problem with abandoned form process I simply decide to put the files in a temporary location /temp
and then if the form is actually completed then based on the value in the hidden field I am moving those images from the /temp to their permanent location. The leftovers in /temp folder can be easily then removed by a scheduled job that checks their creation time and deletes those that a day old for example.
Hope this gives you some ideas.

Answer 2

Another idea to make 1 huge form, but split it to several steps with JavaScript. Only button in last tabs submits form, while other buttons just show next step. You can do weak validation with after "next" action, and strong validation on server after form is submitted.
http://jsfiddle.net/ht227xy3/1/
<script>
function switcher(activeBlock, passiveBlocks){
document.getElementById(activeBlock).style.display='';
for (i in passiveBlocks){
if (document.getElementById(passiveBlocks[i]))
document.getElementById(passiveBlocks[i]).style.display='none';
}
return false;
}
</script>
<form onsubmit="alert('Now form submits!!!')" action="" method="post">
<div id="first" class="tab">
<h3>Step 1 of 4</h3>
<b>Field 1:</b> <input type="text" name="field1" value="" /><br />
<br />
<button type="button" onclick="switcher('second', ['first','third','fourth']);">Next</button>
</div>
<div style="display:none;" id="second" class="tab">
<h3>Step 2 of 4</h3>
<b>Alt 1:</b> <input type="text" name="alt1" value="" /><br />
<br />
<button type="button" onclick="switcher('third', ['first','second','fourth']);">Next</button>
</div>
<div style="display:none;" id="third" class="tab">
<h3>Step 3 of 4</h3>
<b>Extra 1:</b> <input type="text" name="extra1" value="" /><br />
<br />
<button type="button" onclick="switcher('fourth', ['first','second','third']);">Next</button>
</div>
<div style="display:none;" id="fourth" class="tab">
<h3>Step 4 of 4</h3>
<b>File 1:</b> <input type="file" name="file1" /><br />
<br />
<input type="submit" value="Submit" />
</div>
</form>