homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Simple Question OnSubmit

 6:56 pm on Jan 23, 2012 (gmt 0)

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">
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#ad1_update").serialize(), function(data) {

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?



 8:21 pm on Jan 23, 2012 (gmt 0)

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


 8:39 pm on Jan 23, 2012 (gmt 0)

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...


 9:36 pm on Jan 23, 2012 (gmt 0)

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.


 4:53 pm on Jan 24, 2012 (gmt 0)

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) {
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)


#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;

#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.


 5:02 pm on Jan 24, 2012 (gmt 0)

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="....">


 4:34 pm on Jan 25, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved