Animate the submit button

[hogtied]

Hello members,

GOAL: animate a picture submit button

IE. when click on, it appears to be pressed.

I don't want those regular submit buttons. Instead I would like to subsitute it with a button of my own. Except I'm not sure how to animate it.

I can have it as an animated link but I would have to write jscript to collect the form data and send it.

Is there a way to:
1. create a animated submit button.
2. select certain form objects to be sent. (ie if a textbox was left blank, it will be included in the HTTP string. I don't want this to happen. I only want what has been filled to be sent.

Thanks,
Hogtied

[Mr J]

For the animated button one way would be to have an animated gif as the background



<input type="reset" style="width:100;background-image:url(YOURIMAGE.gif)">


The above still uses the standard form button

Or only an image



<a href="#null" onclick="document.FormName.reset()"><img src="YOURIMAGE.gif"></a>

[hogtied]

My bad Mr.J I didn't mean animated in that sense. I meant animated in the sense of mouseOver, or mouseDown.

Thanks for the response thou, I see it as any information will be usefull someway somehow.

[chrismiceli]

onmouseover:

<input type="reset" onMouseOver="this.style='width:100;background-image:url(YOURIMAGE.gif)'" onMouseOut="this.style='//whatever you want'">

[GoHF]

1- you can use the approach presented on the previous post or you can use a image button:

<input type="image" name="theNameYouWant" value="theValueYouWant" alt="theAltYouWant" src="normalImage"
onmouseover="this.src='overImage'"
onmouseout="this.src='normalImage'"
onmousedown="this.src='downImage'"
onmouseup="this.src='overImage'"
>

This will work *only* as a submit button by default, not as reset or any other type of button.

2- You have to use Jscript for that. Either:
Kill the html of the empty inputs (something like "if (value==empty) deleteHtml", which can be a simple commenting of the code with "<!-- -->"), and then submit the form.
- or -
Have a function go through the form checking which inputs are empty or not, meanwhile building a url like "newUrl=form.php?inputName=inputValue&..." with all non-empty inputs, and finally changing the page href with a "window.document.location.href=newUrl" call. This does not submit the form at all.

[piglet]

If you want truly animated rollovers, the master of these is Roy over on this link (http://javascript-fx.com/ani_rollovers/index.html)

[F.N.G.]

This thread may help: button stays pressed onclick? (http://www.codingforums.com/showthread.php?s=&postid=63015#post63015)

adding to that solution, you could use a background image for the button...

[hogtied]

Thanks F.N.G. I think I can get my answer there. On the other hand.

Does anyone know how to pick which information is sent via a form.

For instance: I have a bunch of hidden objects that have "" for a value. When a user does something on of these objects is filled with a number. When the user clicks send I get all of the hidden fields.

Is there a way to stop the sending process caused but the submit button. Select the objects I want sent. Then forward those objects to the form's action location. This way I only get what has values.

Thanks

[hogtied]

For some reason my inbox didn't include the other member's post.

GoHF idea works with the javascript redirect thing.. Sweet thanks..

and the <input type="image"... works as well. What is cool about your code is that I don't need a preload function..

Thanks everyone..

[GoHF]

<form onsubmit="formTreatmentFunctions()...; return false">...

That's the way you make the form NOT submit when you click the submit button, you make the event "onsubmit" return false as the last thing.

The form only submits for real after all the functions on "onsubmit" have been processed and as long as false isn't returned.

Of course, if you change the page's HREF in one of those functions, you won't even give the form a chance to submit normally =).

[hogtied]

I guess there are many way to skin an animal.

I got to sift through the form elements by changing the action attribute of the form to action="javascript:validateForm();"

within the validateForm function I check all the elements and append the values to a variable, then redirect with window.location + variables.

I believe this works the same way as your method.