Go get button! [Archive] - Dynamic Drive Forums

Samarca

11-20-2009, 10:38 PM

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

jscheuer1

11-22-2009, 03:50 AM

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:

<!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.

Samarca

11-22-2009, 12:02 PM

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:)

jscheuer1

11-22-2009, 12:39 PM

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

<!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>