Javascript on Submit button?

MDLarson

MDLarson

Registered
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.
 
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
 
Originally posted by bootedbear
Question: will Dreamweaver let you go in and massage the HTML, or does it insist on generating it all itself?
Click to expand...
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()">
 
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?
 
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?
Click to expand...

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
 
Actually, I quite agree. Just pointing out that tables are overused for layout now that better options are available.

BootedBear
 
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

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

or this to the onclick property of any element

onclick="document.formname.submit();"
Click to expand...
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? :(
 
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
 
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.
 
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
 
This small document shows on a simplistic level how I'd go about creating well-behaved image-based buttons.

Code: 
<!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
 

Attachments

  • button-demo.zip
    1.6 KB · Views: 2
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()")
Click to expand...
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.)
 
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... :p

-Matt
 
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:

Code: 
  document.myForm.submit();

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

hth,
bear
 
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.
 
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)"
onMouseOut="MM_swapImgRestore()">
<img src="images/buttons/submit_up.gif" name="SendForm" alt="Submit" width="50" height="16" border="0"></a>
Click to expand...
Remove the orange semicolon and this should work.
 
You must log in or register to reply here.
Back
Top