1

I'm using JQ and CSS to validate a form, and in conjunction with some JS I'm hiding part of the form until the user clicks continue. However I can't get the styling to be applied to the continue or join now buttons in the form

You can see my example here example1

When you click continue, the second part of the form appears and then you can click join and the form validattion process kicks in. However the 'join now' button at the very bottom is the styling that should be applied to my buttons, but isn't (I can't work out why and I've tried everything I can think of)

so, I decided that instead of using CSS to style the buttons, I would use a rollover image. This works for styling the buttons, but when I try to submit the form, no validation is performed

you can see this here example2

can anyone work out how I can accomplish either 1 or 2 (ie styling the buttons or rollover image with validation)

many thanks

user1249734
  • 11
  • 1

2 Answers2

0

Since it is HTML5, try using <button></button> instead of a link

<button style="width:90px;height:31px;border:0;" onmouseover="MM_swapImage('Image3','','joinnowro.jpg',1)" onmouseout="MM_swapImgRestore()" onclick="submit()" href="#"><img style="width:90px;height:31px;" id="Image3" name="Image3" src="http://www.secklow.com/form/joinnow.jpg" style="width: 90px; height: 31px;"></button>

almost looks OK - not sure why there is a bit of button to the left

For straight html:

  1. NEVER call anything submit
  2. If you submit using script, the onsubmit event handler is NOT called

So

function submitForm(){
  if (validate(document.register)) document.register.submit()
  return false;
}

and

<a href="#" onclick="return submitForm()"
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

For example 1...

1) Remove #register .formbutton1 declaration from form.asp
2) Remove #register fieldset input declaration from formstyle.css
3) Add the following to formstyle.css

input.formbutton1  {
    background:#2c2a29; 
    color:#fff; 
    font-size:16px; 
    line-height:25px;
    padding:0px 0px 0px 0px; 
    display:inline-block; 
    margin-top:0px;
}

input.formbutton1:hover {background:#C68DB6;}

As you can see above, you have specified the behaviour of the button in multiple places. It works fine when I cleared them and added it to formstyle.css.

neo108
  • 5,156
  • 3
  • 27
  • 41