Here's a forum to share the forms that you create. Show the code and add a picture - or a link to the form on the web.
 by rmeijer » Sat Apr 10, 2010 1:32 pm
How to create a File Upload with Progressbar form:Demo: http://www.fanaticsounds.com/upload-nowStep 1.Create a processbar first, go to: http://www.ajaxload.info/ or http://preloaders.net/Save the image somewhere, normally images/stories/. Step 2.Create a file upload form Step 3.Edit your form in Form Management A) Go to: Tab - General B) Form tag attachment add the code: - Code: Select all
onsubmit="display_loading();"
C) Go to: Tab - Form Code D) Form HTML add the code: - Code: Select all
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div>
E) Form JavaScript add the code: - Code: Select all
function display_loading()
{
document.getElementById('loading').style.display = 'block';
}
Step 4.Save, publish and test it. Good Luck! Rogier
-
rmeijer
- Fresh Boarder
-
- Posts: 5
- Joined: Sat Nov 28, 2009 6:04 pm
by Origin Corp » Thu Apr 22, 2010 3:01 am
Thank you for the tutorial.
Is it possible to set the image to display for a mimum amount of time, say 3 seconds?
-
Origin Corp
- Fresh Boarder
-
- Posts: 5
- Joined: Tue Apr 28, 2009 5:39 am
by rmeijer » Mon Jun 07, 2010 9:29 am
You could try something like: - Code: Select all
<script language="JavaScript">
var time = null
function move() {
window.location = 'http://www.yourdomain.com'
</script>
- Code: Select all
<body onload="timer=setTimeout('move()',3000)">
-
rmeijer
- Fresh Boarder
-
- Posts: 5
- Joined: Sat Nov 28, 2009 6:04 pm
by anthonyorigin » Mon Jun 28, 2010 3:26 pm
Thank you so much for the tutorial, I have been browsing the net to find one that'll work for me.
Thanks again.
-
anthonyorigin
- Fresh Boarder
-
- Posts: 1
- Joined: Mon Jun 28, 2010 3:19 pm
by britarenae » Tue Jul 06, 2010 10:25 pm
That works on me.. Thanks for tutorial.
-
britarenae
- Fresh Boarder
-
- Posts: 1
- Joined: Tue Jul 06, 2010 10:10 pm
-
by lukesoares » Fri Feb 24, 2012 4:21 pm
This is a great tutorial, but would anyone be willing to give me some hints for accomplishing this in v4? Not sure where to put the javascript and HTML?
Any help would be greatly appreciated!
-
lukesoares
- Fresh Boarder
-
- Posts: 6
- Joined: Tue Apr 13, 2010 11:32 pm
by GreyHead » Sat Feb 25, 2012 11:24 am
Hi lukesoares, Here's a quick re-write for CFv4. Not tested so will need debugging, please let us know how you get on. Bob How to create a File Upload with Progressbar form:Step 1.Create a processbar first, go to: http://www.ajaxload.info/ or http://preloaders.net/Save the image somewhere, normally images/stories/. Step 2.Create a file upload form, adding an id to the submit button and noting what it is e.g. input_submit_1 Step 3.Edit your form in Form Management A) Add a Load JS action to the On Load event B) Open the Load JS action and add the code: - Code: Select all
window.addEvent('domready', function() {
$('input_submit_1').addEvent('click', function(){
$('loading').setStyle('display', 'block');
});
});
C) Go to the Preview tab and drag in a Custom Element element D) In the Custom Element add the code: - Code: Select all
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div>
Step 4.Save, publish and test it. Last edited by GreyHead on Sun Feb 26, 2012 11:23 am, edited 1 time in total.
Reason: Updated to bugfix script and link to submit button
-
GreyHead
- Administrator
-
- Posts: 32018
- Joined: Tue May 29, 2007 10:15 pm
- Location: Brittany
by lukesoares » Sun Feb 26, 2012 6:42 am
Thanks for the quick reply.
I made the recommended changes and I still seem to be lacking a progress bar.
I tried in both Chrome and Safari, and same result.
I feel like I'm missing something as your suggestion should have at least done something. In the meantime, I'll keep at it and see what I can find. Thanks!
-
lukesoares
- Fresh Boarder
-
- Posts: 6
- Joined: Tue Apr 13, 2010 11:32 pm
by GreyHead » Sun Feb 26, 2012 11:24 am
Hi lukesoares ,
I updated the earlier post to fix some typos in the script and clean it up and I switched the action from the file load input to the submit button being clicked. This version is working.
Bob
-
GreyHead
- Administrator
-
- Posts: 32018
- Joined: Tue May 29, 2007 10:15 pm
- Location: Brittany
by lukesoares » Sun Feb 26, 2012 3:05 pm
That works perfectly.
One note, I had to enable the "Dynamic File" under Load JS. Prior to that it wasn't working. (That's probably normal operation but just thought I'd mention it for future searchers)
Thanks again! You've got a beer coming your way.
-
lukesoares
- Fresh Boarder
-
- Posts: 6
- Joined: Tue Apr 13, 2010 11:32 pm
by GreyHead » Sun Feb 26, 2012 4:46 pm
Hi Luke,
Just FYI I didn't have 'Dynamic file' set for my test but that could be a result of using different templates.
Thanks for the beer.
Bob
-
GreyHead
- Administrator
-
- Posts: 32018
- Joined: Tue May 29, 2007 10:15 pm
- Location: Brittany
by lukesoares » Mon Feb 27, 2012 8:10 pm
So, I've come up with one other "little" issue that I'd like to resolve...
When my users click Submit, I'd like it to hide all the other form elements except for the "Your file is being uploaded" message with progress bar. So the end result is they end up with just a blank page with the progress bar loading. Which of course redirects after the upload to the "Thanks" message.
I'm not so good with javascript, so I'm looking for suggestions or perhaps some hints on where I could find out how to do this.
Thanks!
-
lukesoares
- Fresh Boarder
-
- Posts: 6
- Joined: Tue Apr 13, 2010 11:32 pm
by SPABO » Fri May 04, 2012 12:32 pm
Bob, This is what I was looking for, however.... My forms are "CUSTOM", so I cannot drag Custom Element in the Preview tab an save it. So, wher do I leave this code? - Code: Select all
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div>
The submit button in the forms have this code - Code: Select all
<div class="ccms_form_element cfdiv_submit" id="autoID-4e20dbb568aa715b9ec59ab27998c1ab_container_div"><input name="submit" class="" value="Verstuur" type="submit" />
I suppose I need to change the id to eg "input_submit_1"
-
SPABO
- Gold Boarder
-
- Posts: 226
- Joined: Wed Apr 07, 2010 6:15 pm
by GreyHead » Sat May 26, 2012 7:40 am
Hi, There's an improved version of the Loading gif code here - it includes Luuk's request to hide the body of the form in a later post. Bob
-
GreyHead
- Administrator
-
- Posts: 32018
- Joined: Tue May 29, 2007 10:15 pm
- Location: Brittany
by gatsman » Thu Feb 28, 2013 3:26 pm
This is exactly what i was looking for thank you. Only problem is that (i use it for a text form not an upload form no problem there) if you click the submit button without any text in the field (required field) you get the message "This field is required." but also the loading div shows up and gets stuck there  Any help to avoid that? I was a little quick on the trigger, posted before following the link
If anyone else has the same problem follow the link in Bob's post above and read the 9th post.Thanks again Bob Last edited by gatsman on Thu Feb 28, 2013 3:59 pm, edited 1 time in total.
-
gatsman
- Fresh Boarder
-
- Posts: 10
- Joined: Fri Jan 21, 2011 8:29 am
Return to ChronoForms ShowCase - Share your forms with others
Who is online
Users browsing this forum: No registered users and 1 guest
|
