Simple Question OnSubmit

[ZakAltF4]

Mods: I am not sure whether you would want this in the JavaScript Forum or HTML, but since it includes both, I posted it here. Feel free to move if you see fit.

I have a simple submit form in Ajax calling to an external php form.

<script type="text/javascript">
$(document).ready(function(){
$("#ad1_update").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#ad1_update").serialize(), function(data) {
$('#results1').html(data);
});
}
});
});
</script>

Currently I have form

 <form id="ad1" ..... >"

With a standard

<input tryp="submit" .....

How do I use a SPAN created button instead of the standard <input .. submit button?

[Fotiman]

You shouldn't. Doing so would make your form inaccessible for users with JavaScript disabled.

[ZakAltF4]

This script is for backend admin .. It's not for the "public" .. We will have 4 users using this script .. It's for a backend Magento plugin, which Magento admin itself doesn't work without JavaScript...

[Fotiman]

What is the motivation for removing the standard input element? You could leave it as a standard input, and then replace that element with JavaScript, thus utilizing progressive enhancement. Note, though, that standard input submit buttons add behavior to your form... users can press enter in a text field to submit the form using the first submit element. If you remove that, then you're also removing that functionality.

[rocknbil]

Right, do you want to use a span because you want an image for the button? Or because the form submits and you don't want it to?

In the second case you just need to return false from the function:

submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#ad1_update").serialize(), function(data) {
$('#results1').html(data);
return false;
});
}

The return false should stop the form from submitting. In the first case,

<input type="submit" id="myid" value="submit">

Create an image like so. Let's say the button is 50 px tall, this image would be 100px tall . . .

NORMAL STATE (on top half)
MOUSEOVER STATE (on bottom half)

then

#myid {
background:url(myimage.gif) top left no-repeat;
text-indent: -50000px; /* removes word "submit" */
display: block;
width: 100px;
height: 50px;
text-decoration: none;
border: none;
outline:none;
}

#myid:hover {
background-position: bottom left;
}

To use a span you're going to have to add even more JS, then attach a behavior to it to submit because a span is not a form element, and even so the press enter problem remains. More work than it's worth.

[ZakAltF4]

rocknbil, I had an idea based on your CSS ... Can I just use a style on the input itself? Is there any advantages/disadvantages to doing so? I am just trying to get it to look and feel like the rest of the site .. Little things that people in an office complain about you know ... Anyway, thanks for your input!

<input type="submit" name="submit" value="Go" style="....">

[rocknbil]

That's exactly what the external CSS does, applies style to the element with the id myid - which is the submit button. I wouldn't do it inline, but you can. Advantages to external sheets? You separate content from presentation markup using an external style sheet. Your actual documents are more lightweight, making them load faster. You can externally change the elements within page output without modifying the documents. Once cached, the CSS applies to all pages and doesn't have to sift through the document to apply styles. Easier to read, easier to update. Inline styles will always override external style sheets, so it presents some development issues (why isn't this selector affecting that element? Oh yeah. Still has an inline style.) I'm sure there's more.