Help with simple script…

@swalsh19Apr 03.2007

I have a few pages from a catalog from my store online but would like a simple javascript that would allow a person to input a page number in a textbox. Then after hitting submit it would load that page number by affixing the users number to the end of the word “page”.

Example:

User inputs 23 in textbox.

23 is stored into the pageno variable.

Onsubmit then executes: http:www.mystorepage{pageno}

Something like that…

to post a comment

JavaScript

21 Comments(s) _↴

@scoperApr 03.2007 — #the main thing here is to ensure that the button you use isn't a submit button, but a standard one...

<i>
 </i>function redir() {
 var pgno = document.getElementById('pageno').value;
 window.location = "http:\www.mystorepage" + pgno;
 }
 
 ...
 
 &lt;input type="text" id="pageno" /&gt;
 &lt;input type="button" value="go" onclick="redir()" /&gt;

Hope it helps

@swalsh19authorApr 03.2007 — #Thanks Scott! ?

Perfect, that works exactly how I wanted. ?

Now is it hard to do a couple other little things.

[LIST=1]

[*]textbox input size = 3 digits

[*]textbox only accept numeric digits, otherwise clear textbox

[/LIST]

@scoperApr 03.2007 — #the input size is easy... simply size="3"...

as far as the dynamic input validation is concerned... heres something i prepared earlier :p

<i>
 </i>function checkInput()
 {
 var code;
 if (!e) var e = window.event;
 if (e.keyCode) code = e.keyCode;
 else if (e.which) code = e.which;
 
 <i>    </i>return code &gt;= 48 &amp;&amp; code &lt;= 57;
 }
 
 &lt;input type="text" ... onkeydown="return checkInput()" ... /&gt;

I think that should work ok

@KorApr 03.2007 — #A good simple solution is to use Regular Expression instead of the unsure keyCode method and, for sure, the [B]onkeyup[/B] event

http://lawrence.ecorp.net/inet/samples/regexp-intro.php

@scoperApr 03.2007 — #whats unsure about using the keyCode method?

@swalsh19authorApr 03.2007 — #Scott,

Thanks for the help...

I'm using CUTEHTML as my html editor as it is handy for newbs like myself as it show when code is good/bad.

With the last function for the numeric check, the editor is saying there is something wrong with the line:

return code >= 48 && code <= 57;

}

it grays out the code <=57; which makes it just a comment... Any ideas on this?

@KorApr 03.2007 — #

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function valid(f){
 !/^d*$/.test(f.value)?f.value = f.value.replace(/[^d]/g,""):null;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;input type="text" onkeyup="valid(this)" maxlength="3"&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@scoperApr 03.2007 — #there is nothing wrong syntactically with the line... it might just be a bug in the editor ?

@swalsh19authorApr 03.2007 — #Thanks guys for the help! This simple little script works AWESOME!!!

@KorApr 03.2007 — #The event propagation for [B]onkeydown[/B] works different in Mozilla and IE. [B]onkeyup[/B] works OK as a cross browser event, and it is a better choose, in my opinion.

@KorApr 03.2007 — #Here's a better approach, which considers that user might use the mouse's Copy/Pase options, in which case the [B]onblur[/B] event is to be used as well.

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function valid(f){
 while(!/^d*$/.test(f.value)){
 f.value = f.value.replace(/[^d]/g,"");
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;input type="text" onkeyup="valid(this)" onblur="valid(this)" maxlength="3"&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@swalsh19authorApr 03.2007 — #OK guys one last thing. How would you format it so the number inputed is ALWAYS 3 digits.

So if someone typed 23 it would be stored as 023.

@scoperApr 03.2007 — #function padLeft(val) {

var output = val;

for (var i = val.length; i < 3; i++)

output = "0" + output;

return output;

}

@swalsh19authorApr 03.2007 — #hehe, you make this look so easy...

So can I to 2 function calls on the button click? First the padleft function then the redir function?

@scoperApr 03.2007 — #yeah, or it might be easier to call paddLeft in the redir function

like so:

<i>
 </i>function redir() {
 var pgno = document.getElementById('pageno').value;
 pgno = trimLeft(pgno);
 
 <i>    </i>....
 }

It should work, ok, although it is untested and written on the fly... so excuse any errors :p

@swalsh19authorApr 03.2007 — #You da man!!! thanks. works like a charm now...

@swalsh19authorApr 03.2007 — #OK one last thing and its is complete...

function redir() {

var pgno = document.getElementById('pageno').value;

window.location = "http:www.mystorepage" + pgno;

}

Can I change the window.location line to be:

"http:www.mystorepage" + pgno[COLOR="Red"] + ".pdf"[/COLOR];

Would this make it so it would load page001.pdf if 1 was typed in the box?

@scoperApr 03.2007 — #yep... see its easy really! ?

@swalsh19authorApr 03.2007 — #OK so I compiled the following, and it won't work for me. Can you tell me where I went wrong?

<HTML>

<HEAD>

<TITLE></TITLE>

<script type="text/javascript">

function redir()

{

var pgno = document.getElementById('pageno').value;

pgno = padLeft(pgno);

window.location = "http:www.delawarepumpscatalogpage" + pgno + ".pdf";>

}

function padLeft(val)

{

var output = val;

for (var i = val.length; i < 3; i++)

output = "0" + output;

return output;

}

function checkInput()

{

var code;

if (!e) var e = window.event;

if (e.keyCode) code = e.keyCode;

else if (e.which) code = e.which;

return code >= 48 && code <= 57;
}

</script>

</HEAD>

<input type="text" id="pageno" onkeydown="return checkInput()" maxlength="3" />

<input type="button" value="go" onclick="redir()" />

</BODY>

</HTML>

@swalsh19authorApr 03.2007 — #I redid the script and I have it working now.

Thanks again for the help I GREATLY appreciated it!

? ? ?

Steve

@swalsh19authorApr 04.2007 — #One little tiny thing. Can you tell me how to set the focus to the textbox, so the user doesn't have to click the textbox before entering data.

Also in #JavaScript _↴

File respons from server, not reloading side closing stuff!"never show this page again" - how can I do this?

Success!

Help @swalsh19 spread the word by sharing this article on Twitter...

Tweet This

Help with simple script…

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with simple script…

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #JavaScript _↴