What am I doing Wrong?

Where am I going wrong?  I am trying to have a single input field that will accept a 1 or 2 digit number.  Then when the user hits enter, I want it to call my JavaScript function to display the proper image.  Where am I going wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.08 [en] (Win95; I) [Netscape]">
<SCRIPT language="JavaScript">
var z=1;
function DoMouse(name, place, x)
{
      document.images[place].src = name+x+'.jpg';
}

function GimmeAPage(name, place, x)
      document.images[place].src = name+x+'.jpg';
}
</SCRIPT>
</HEAD>
<BODY>

<CENTER><A NAME="top"></A>Top
<P><IMG SRC="Page1.jpg" NAME="TheBook" HEIGHT=1014 WIDTH=720>
<P><A HREF="#top" onClick="DoMouse('Page', 'TheBook', --z);">Previous
Page</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<A HREF="#top" onClick="DoMouse('Page', 'TheBook', ++z);">Next Page</A></CENTER>
<FORM ONSUBMIT="GimmeAPage('Page', 'TheBook', name);z=name;">
<input type=text maxlength=2 name="name" value="2">
</FORM>
</BODY>
</HTML>

~Aaron
LVL 3
BudVVeezerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SiM99Commented:
shouldn't place be a number ??
(document.images[1].src, not document.images[Book].src)
0
TTomCommented:
Bud:

Looks to me like you are never really specifying the value of "name".  That's the name of your field, but you also use it as the name of a variable.

Try something like:

<form onsubmit="GimmeAPage('Page','TheBook',document.forms[0].name.value);z=document.forms[0].name.value;">

You MAY have to change the value to a number, i.e., parseInt(document.forms[0].name.value), since the field will give you text by default.

I am also a little frightened by a form field named "name".  It might work; but it's too close to being a reserved word (even if it's not) for me.

Finally, you might try outputting some of your values in alert statements, just to be sure you are getting what you are looking for.

Tom
0
BudVVeezerAuthor Commented:
ok, now something VERY weird is happening...  I added your comments(TTom) to my code by using document.forms[0] etc, and I also added an alert statement right after I have it switch the page.  It switches the page just fine, and the alert box shows the number I entered, BUT, as soon as I hit ok on the alert box(or take it out completely), it goes pack to page 1.  I don't get why!  Does the page do some sort of refresh when you submit something?  =(  Btw, Sim99, the reason I can use document.images['TheBook'] is because the image on the page has been named TheBook.  It's weird, but it works.  =)

~Aaron
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

BudVVeezerAuthor Commented:
ok, I found out what's going on here.  When you submit the form, it automatically reloads the page(annoying IMO), and when it reloads the page, it sets my z counters back to 1.  Hence the reason it always displays page 1.  Any thoughts on how to fix this?

~Aaron
0
TTomCommented:
Aaron:

A form will always reload if no action is specified in the tag.  That's the nature of a form (it has to go somewhere).

The reason for resetting is in your JS

"var z=1"

Since you are "only" changing the image on the page (or did I miss something), why not just do it with a JS function on the same page instead of using the form and submitting it?

Tom
0
BudVVeezerAuthor Commented:
Do you know of such a JS function?  I'm fairly new to JS programming(but not programming in general).  I figured out that the z=1 was the culprit, but I didn't know of any other way to do it than a form.  How do you get a JS edit box and submit button?

~Aaron
0
TTomCommented:
Aaron:

If you want to change the image on a page based on the information entered into a text box, you should be able to use the onchange event handler of the textbox.

<input type=text onchange="GimmeAPage('Page','TheBook',this.value);">

You may have to use parseInt(this.value), but this should change the image on the page without reloading the whole thing.
0
TTomCommented:
BTW, not sure about your DoMouse() function, but that's just me.  It may also have to be adjusted accordingly.

Tom
0
BudVVeezerAuthor Commented:
I may be wrong(I haven't tried implementing your comment yet as I am at school), but wouldn't OnChange be activated to so speak once a single character has been entered?  If so, how would I do double digits?  I'll test your answer once I get home.

~Aaron
0
TTomCommented:
Not at all sure, but I think onChange may be activated when the field is left.  If not, you can probably use onBlur, which definitely does not occur until the user leaves the field.

According to my docs "this activates when the user makes a change to the text field and clicks or tabs away".  Sounds like what you want?

Tom
0
oubelkasCommented:
Tom > sorry to interrupt in your conversation with BudVVeezer, but in the comment of Monday, Nov 29 3:08 PM you said

"A form will always reload if no action is specified in the tag.  That's the nature of a form (it has to go somewhere)."

Well, this not exactly true, if you have a form with a submit button, then you won't have to submit your entry. This is achieved by saying "return false;" in the onSubmit event handler of the form. I think this was the problem BudVVeezer had. The page reloaded each time he submitted. With the return false, this problem should be fixed.

Just commenting ;)

Joseph

0
TTomCommented:
Joseph:

You're absolutely right.  The point I was trying to make (badly) is that the default action of a form is to submit to itself, i.e., if no page is specified in the "action" property of the form tag, and the form is allowed to submit.

"Return false" in the onsubmit handler will certainly stop that.

BUT, if you stop the form submission, the data will also not be forwarded.  I think Aaron wants the data to be used, but not the page reloaded, and I think the best way to do that is to forego the form and use JavaScript.

Thanks,

Tom
0
BudVVeezerAuthor Commented:
::smiles::Tom, your comments worked wonderfully.  =)  Post an answer, the points are yours!

~Aaron
0
TTomCommented:
Aaron:

Thanks!   Always happy to help.

Tom
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BudVVeezerAuthor Commented:
=o)
0
BudVVeezerAuthor Commented:
ok, this is a kinda related question for you TTom...if I were to want to use my text field, intead of onChange, but use a button.  How do I access the text in it?  ie)how to I "call" it?  Can I use name.value?  Or is there a different way?

~Aaron
0
TTomCommented:
Aaron:

Sorry.  Got a little bit out of sync on this one.

You want to use your text box, but, instead of doing the change when the entry is made, you want a button to control it?

If that's the case, you will need to give your text box a name (or did we do that).  Then your button would have code to call the function:

<input type=text name=mypage>
<input type=button onclick="GimmeAPage('Page', 'TheBook', document.forms[0].mypage.value);">

I think that will get you there.  Let me know if it doesn't.

Tom
0
BudVVeezerAuthor Commented:
nope, that works just fine!  Thanks tons for the help Tom!  It's appreciated.

~Aaron
0
TTomCommented:
Most welcome!

Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.