Why Does My Java Script Reset My Form Fields? Java Script refreshes more than just the image its supposed to.

[j00bj00b 0]

Hi,

 

Before I get down to the problem, I'd like to say that I've only got experience in turbo pascal from when I was in school, so I've been learning how to code according to what I have required in a web page via tutorials online. I'm actually a graphic designer/animator, so I'm using Dreamweaver CS3.

 

I've been working on a form in html. I've created a php captcha, which randomizes on refresh or by clicking a "refresh" button. When clicking the refresh button, the following Java Script is call:

 

<script language="JavaScript"><!--function flip() {	if (document.images)		document.images['captchacode'].src = 'form_captcha2.php';}//--></script>

Here's the code that calls the Java Script:

 

<a href><img src="Refresh.png" alt="" width="25" height="25" border="0" align="bottom" class="refresh" onclick="flip()"/></a></td>

 

It refreshes the captcha, but also seems to refresh the page and thus resets any form fields the user may have entered. I've tried other Java Scripts, which all refresh the captcha, but they all refresh the whole page.

 

It's not a big problem, but it can be irritating for the user, I figured. If anyone can offer me a reason and/or solution, it would be greatly appreciated.

 

Notice from galexcd:

Any code must be within

 or [html] tags

[galexcd 0]

It looks like it's refreshing the whole page because you've got the image within an anchor tag. If you just include the refresh image with the onclick attribute it should work fine. And if you wanted to you could use css to turn the cursor into a hand when hovering over the image to make it look a bit more like a link.

[j00bj00b 0]

Hi,Thanks for the the response. I already have the pointer CSS applied, thanks. I've tried what you (galexcd) suggested, but upon clicking, nothing happens at all :\I also tried:

<a href="java script: flip()">

I tried the above, both with and without the "onclick" command.The link in the status bar then shows java script: flip(), but again nothing happens upon clicking it. Do you or anyone else have any ideas, please?

[truefusion 3]

Let's look at the following code:

<a href><img src="Refresh.png" alt="" width="25" height="25" border="0" align="bottom" class="refresh" onclick="flip()"/></a>

The reason why it refreshes the page is because you have the image surrounded by an anchor—you don't need one there. Having the href attribute, even if it doesn't contain a value, is the same as having href=""—an empty value means the current page to the browser. Now let's look at the image element in that code: how are you differentiating it from other images? That class attribute isn't going to help you here. Look at your JavaScript code:

<script language="JavaScript"><!--function flip() {	if (document.images)		document.images['captchacode'].src = 'form_captcha2.php';}//--></script>

Where is "captchacode" on that image element you want changed? Nothing happens because the browser can't find document.images.captchacode. Give the image the name "captchacode," that is, give it a name attribute with the value of "captchacode" and it should work then.

[manish-mohania 0]

It looks like it's refreshing the whole page because you've got the image within an anchor tag. If you just include the refresh image with the onclick attribute it should work fine. And if you wanted to you could use css to turn the cursor into a hand when hovering over the image to make it look a bit more like a link.

I want to add one more thing to it, hope it would make things more clear :-)

Anchor tags are hyperlinks that make us visit other pages, so the default action of "onclick" in an achor tag is to leave the current page and visit the linked page.

If we want to change this default action, then we should do like this:

<a href="#" onclick="java script: dosomething(); return false;">click me</a>

please, note the return false; statement in the above code.

[j00bj00b 0]

Hi, thanks to everyone for responding and trying to help . Unfortunately, the code that was suggested didn't work.

I did however find some code that works:

   <script type="text/javascript">      <!--   function new_captcha()   {   var c_currentTime = new Date();   var c_miliseconds = c_currentTime.getTime();      document.getElementById('captcha').src = 'image.php?x='+ c_miliseconds;   }   -->   </script>

The code above worked

I found it here: http://forums.xisto.com/no_longer_exists/