# Javascript on Submit button?



## MDLarson (Mar 11, 2003)

I have a strange desire to make my buttons do the old switcheroo when on MouseOver and Mouse Down, but I can't seem to get it to work with the Submit button.

I know the regular Submit button doesn't even use an image (it's built-in to your browser,) but I have since added an image to it, no problem.  But I can't select the button in Dreamweaver and add a Swap Image Behavior to it.

http://www.larsonsystems.com/index_new.html

The Submit button in question is on the top right of the window right below the search text box.  I'd like it to function like the "Tips" button.


----------



## bootedbear (Mar 12, 2003)

OK, I'll probably get flamed for this, but this is a perfect example of why I'd rather die than let some WYSIWIG tool like Dreamweaver generate my HTML and script.

What you want to do is completely possible, and actually rather simple to accomplish, but you are limited to what Dreamweaver will let you do.

Question: will Dreamweaver let you go in and massage the HTML, or does it insist on generating it all itself?

bear


----------



## MDLarson (Mar 12, 2003)

> _Originally posted by bootedbear _
> *Question: will Dreamweaver let you go in and massage the HTML, or does it insist on generating it all itself?*


No, Dreamweaver rocks because you can code entirely in text or WYSIWYG, or even split-screen (what I do.)  No problems there.  I can work in HTML, but I prefer WYSIWYG (I'm graphical oriented.)

But, I've been digging at this problem myself and have gotten a little closer; take a look:

http://www.larsonsystems.com/search.html

I implemented some code I got from here.  Now my problem is getting the form to work.  As you can see from my example, the first Submit button *looks* right but doesn't work.  The second Submit button works, but it's the non-dynamic button.

I think the key is in the following code:

<a href="javascript:document.formname.submit()">


----------



## agusgriego (Mar 14, 2003)

To submit a form, you don't need a Submit button, neither you need a submit button with an image on top.

You just simply add this to the href property of an A tag

href="javascript: document.formname.submit();"

or this to the onclick property of any element

onclick="document.formname.submit();"


And another thing. How can you make HTML WITHOUT using dreamweaver? Is almost impossible to create webpages with complex designs without Dreamweaver. How else could you make nested tables within nested tables and not loose track where you are?


----------



## bootedbear (Mar 14, 2003)

> And another thing. How can you make HTML WITHOUT using dreamweaver? Is almost impossible to create webpages with complex designs without Dreamweaver. How else could you make nested tables within nested tables and not loose track where you are?



Simple. You stop using nested tables for layout as if it were 1995, and start using modern W3C mechanisms like CSS to create web pages.

Not trying to be snotty, but just pointing out that relying on automated tools to write code for you will never yield the best results.

bear


----------



## toast (Mar 14, 2003)

CSS and <tables> combine very well IMO. No need to choose either one or the other.


----------



## bootedbear (Mar 14, 2003)

Actually, I quite agree. Just pointing out that tables are overused for layout now that better options are available.

BootedBear


----------



## MDLarson (Mar 17, 2003)

> _Originally posted by agusgriego _
> *To submit a form, you don't need a Submit button, neither you need a submit button with an image on top.
> 
> You just simply add this to the href property of an A tag
> ...


Well, I can appreciate the great debate as to whether or not Dreamweaver is a necessary design tool or not... but in the mean time, I still can't manage to get this to work right.  

I copied the above properties to my code, and even tried changing "formname" to "sp-q" (the name of my particular search form.)  The button looks like it should, complete with the cursor turning into a hand, but falls short with the actual form submission.

Here's my actual code:
<a href="javascript:;" onClick="document.sp-q.submit();"
onMouseDown="MM_swapImage('SendForm','','images/buttons/submit_down.gif',1)"
onMouseOver="MM_swapImage('SendForm','','images/buttons/submit_over.gif',1)"
onMouseOut="MM_swapImgRestore()">
<img src="images/buttons/submit_up.gif" name="SendForm" alt="Submit" width="50" height="16" border="0"></a>
What am I doing wrong?


----------



## bootedbear (Mar 18, 2003)

OK, I'll once again disclaim that I'm not a DW user so I don't really know what it's trying to accomplish here, but looking at the HTML that you posted, here are some ways that I'd approach it:

Firstly, the fact that there are both an href and an onclick on the "a" tag seems specious and could interfere with each other.  If I were to continue using the "a" tag at all (see next item), I'd remove the onclick and perform the javascript in the href (a la href="javascript:document.formname.submit()")

But, taking a bit of a step back, I'd remove the "a" tag completely and move all the activity to the "img" itself. Unless you are concerned with deprecated browsers like NN4 (and those that don't comply to W3C standards like OmniWeb), all the activity you are trying to achieve can be performed with event handlers on the image itself, removing the need (and complexity) for the "a" tag.

The problem with such changes is that the DW-supplied JavaScript methods probably expect the HTML to be structured with the "a" tag and won't work with the simplification.

If you'd like I'll code up my simplified version without the DW methods if you'd like to look at it for reference.

hth,
bear


----------



## twister (Mar 18, 2003)

Ok here's a question.  Kinda off topic (sorry) but kinda related.  I want to put in a Update Cart and Checkout button.  So in my form code i do this:

<input type="submit" value="Update Cart"> &nbsp;<a href="pre_checkout.php"><input name="Check Out" type="button" id="Check Out" value="Check Out"></a>

Ok so that works great on a mac. My checkout button with link works great!  But on a PC is retarded and ignores the link and does nothing.

How do i get PCs to listen to me?  Oh and I'm using a button as a link because i want it to match the first one.  And it's in the same form because if i end one form and begin another it puts in a line break.   And the Update Cart button works fine.


----------



## bootedbear (Mar 18, 2003)

Yeah, embedding an input button in a link is a sketchy way of doing it and is likely to have "interesting" effects in various browsers. I'd omit the link and use an onclick handler on the button to either submit the form (if you need the form elements) or to emulate the effects of the "a" tag with something like "document.location='whatever.php'".

hth,
bear


----------



## twister (Mar 18, 2003)

thanks for the idea. i may just remove the button and put in a regular link. As long as it's a nice  one


----------



## bootedbear (Mar 18, 2003)

This small document shows on a simplistic level how I'd go about creating well-behaved image-based buttons.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>button demo</title>
<script>
function arm( img ) {
  img.src = "button_armed.gif";
}
function press( img ) {
  img.src = "button_pressed.gif"
}
function disarm( img ) {
  img.src = "button_normal.gif"
}
function onClickButton() {
  alert( "Clicked!" );
}
</script>
</head>

<body>

<form name="myForm" action="whatever">
  <img src="button_normal.gif" alt="Click me!" width="120" height="30" border="0" onclick="onClickButton()" onmousedown="press(this)" onmouseover="arm(this)" onmouseout="disarm(this)">
</form>

</body>
</html>
```

In an actual document, I'd code the button manipulation functions in a more general manner so that they could be used for all buttons (and put them off into a separate .js file so they could be aused on all pages), but this give you the idea.

The attached zip file has the document and the 3 button images I used.

hth,
bear


----------



## MDLarson (Mar 18, 2003)

> _Originally posted by bootedbear _
> *Firstly, the fact that there are both an href and an onclick on the "a" tag seems specious and could interfere with each other.  If I were to continue using the "a" tag at all (see next item), I'd remove the onclick and perform the javascript in the href (a la href="javascript:document.formname.submit()")*


The "a" tag was my attempt at getting it to work, and nothing Dreamweaver did.  But I'll have to try some of your suggestions tomorrow at work (I'm at home now.)


----------



## MDLarson (Mar 21, 2003)

OK, one last stab at this problem before I give up.  Bear, your button example looked interesting, but it looked like you ignored the form altogether, something I can't do.

This is my testing grounds:  http://www.larsonsystems.com/search.html

I can't figure out why the first button doesn't work!  I'm feeling pretty dumb, but I'd still like to figure this out...  

-Matt


----------



## twister (Mar 21, 2003)

don't you need an onClick in that javascript. Otherwise how does it know what to do on click?


----------



## bootedbear (Mar 21, 2003)

In my example (which I kept spartan for clarity) You can manipulate the form any way you would like in the onclick handler.

For example to submit the form, replace the alert with:


```
document.myForm.submit();
```

What are you trying to do to the form that has you tied in knots?

hth,
bear


----------



## MDLarson (Mar 21, 2003)

Well, I officially feel pretty stupid.  All I needed to do was to give my search form a name!  I named it "search" and placed onClick="document.search.submit();" in my <a> tag.  _The devil is officially in the details!_  Thanks for the help, all.


----------



## Arden (Mar 21, 2003)

Your question may have been answered already, but I'm gonna say this anyway.


> _Originally posted by MDLarson _
> *<a href="javascript:[color=orange-red];[/color]" onClick="document.sp-q.submit();"
> onMouseDown="MM_swapImage('SendForm','','images/buttons/submit_down.gif',1)"
> onMouseOver="MM_swapImage('SendForm','','images/buttons/submit_over.gif',1)"
> ...


Remove the orange semicolon and this should work.


----------

