Results 1 to 4 of 4

Thread: Go get button!

  1. #1
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Go get button!

    Hi Everyone,

    This is probably something easy and is already out there so maybe you can direct me in the right direction my problem is:

    I want a button on my website with an text area next to it, and when you enter a number and press the submit but it retrieves the file.

    What I mean is a user will enter 12345 and hit enter this will then open a file which will corrospond as 12345.pdf file. I am using Serif webplusX2 so it is quite easy to enter code on the site. My website is in a folder and obviously the domain name looks for this folder then the index.html.

    I will be uploading invoice files to the same folder as to make it simple for me to locate the file and I know I can type the name of the file like www.mysite.co.uk/12345.pdf in the address bar put looks naff and what user wants to do all that....

    I would be very greatfully for any information or advice on this matter.

    Thank you for your time

    Mark

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    This is a bit of overkill, but I thought it would be nice to have the page reload after an alert if the PDF file wasn't there. It will only work on some servers. If it works on yours, fine. Otherwise it should be no worse than a page that doesn't attempt to check if the file is there or not. But we can convert to that if your server doesn't do well with this code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var f = document.forms.pdfform, i = f.elements.num, l = location.href, s = $('#statusDiv');
    	i.onfocus = function(){
    		if(!/^\d+$/.test(i.value)){
    			i.value = '';
    		}
    	};
    	i.onblur = function(){
    		if(!/^\d+$/.test(i.value)){
    			i.value = 'enter PDF #';
    		}
    	};
    	f.onsubmit = function(){
    		if(/^\d+$/.test(i.value)){
    			$.ajax({url:  i.value + '.pdf',
    				success: function(){location = this.url;},
    				error: function(){alert('File Not Found!'); location = l;},
    				beforeSend: function(){s.html('Loading . . .')}
    			});
    		}else{
    			alert('Numbers Only Please.');
    		}
    		return false;
    	};
    });
    </script>
    </head>
    <body>
    <form name="pdfform" action="#" onsubmit="return false;">
    <div>
    <input type="submit" value="Get PDF"> # <input type="text" name="num" value="enter PDF #">
    <div id="statusDiv">
    Status
    </div>
    </div>
    </form>
    </body>
    </html>
    Note: This will only work well locally in some browsers (IE and Firefox), but will work well live in most browsers if the server supports it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thank you very much, its works OK with Firefox but not IE but I am not to bothered about this as I will put a link stating it only works with mozilla.

    Your talent is a credit to everyone that knows you. Thank you again

    Mark

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Works OK here in IE 7. What version of IE are you using? Anyways, here's an improved version:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var f = $(document.forms.pdfform), i = f.find('input[name="num"]'), s = $('#statusDiv'),
    	vals = {focus: '', blur: 'enter PDF #', load: 'Loading . . .', not: ' Not Found!',
    		stat: 'Status', ext: '.pdf', num: 'Numbers Only Please.', file: 'File '}, a;
    	s.html(vals.stat);
    	i.bind('focus blur', function(e){
    		if(!/^\d+$/.test(this.value)){
    			this.value = vals[e.type];
    		}
    	});
    	f.bind('submit', function(e){
    		if(/^\d+$/.test(i[0].value)){
    			$.ajax({url:  i[0].value + vals.ext,
    				success: function(){
    					i[0].value = vals.blur;
    					location = this.url;},
    				error: function(){
    					alert(a = vals.file + this.url + vals.not);
    					s.html(a);
    					i[0].value = vals.blur;},
    				beforeSend: function(){s.html(vals.load);}
    			});
    		}else{
    			alert(vals.num);
    			s.html(vals.num);
    		}
    		e.preventDefault();
    	});
    });
    </script>
    </head>
    <body>
    <form name="pdfform" action="#" onsubmit="return false;">
    <div>
    <input type="submit" value="Get PDF"> # <input type="text" name="num" value="enter PDF #">
    <div id="statusDiv">
    Javascript Required
    </div>
    </div>
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •