1

I'm working on a prototype in which there will be several short forms submitted on a page as a user works through transcribing and coding a dataset. I'd like for submitted items to change to a different css class (so that the user can visually see a list item as completed, but can still go back and resubmit if there's an error), but can't quite figure out how.

I admit to being a "plug and play" jQuery user, which is a large part of my problems. Any help is appreciated!

EDIT with some more information:

So a few caveats here are that I'm only working on UI, someone else is handling the backend. These forms are supposed to push the information into a database. Individuals will be assigned hundreds of sound files to transcribe. We'll be breaking them into sets of 100 which they will be able to work through in sub-sets of 10. At present, I have an ordered list set up in which all the sound files/calls to the database/etc. will be dumped. There is a jQuery paging function which shows only ten per 'quasi-page'.

For each individual list item, the user will click to listen to a file, then decide if it was understandable or not. If it was, they select "yes" and one form appears, if it wasn't, they select "no" and a different form appears.

With all that I'm not sure if the code is really necessary. I'll add it if it would help.

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
Elyse Ku Felts
  • 11
  • 1
  • 3
  • If you're doing a submit on a page with multiple forms, you're going to get a page refresh. Is that the intended result? – artlung Oct 07 '11 at 23:47
  • I'm not sure yet. As I said in another comment, I'm doing the UI while someone else is handling the backend. These forms are intended to push the information into a database, preferably without refreshing the page. That's another issue all on its own, I suppose. :\ – Elyse Ku Felts Oct 07 '11 at 23:58
  • Yes, I think you won't be submitting these forms normally if you have multiple on a single page. See: http://stackoverflow.com/questions/425095/submit-form-using-ajax-and-jquery -- Also, welcome to StackOverflow! – artlung Oct 08 '11 at 00:02

2 Answers2

1

Forms have the .submit() method. Use it like this:

$('form').submit(function() {
    $(this).addClass('foo');
});

The form will, of course, only keep that class until the page is reloaded. You don't say whether you're using AJAX, or how much of your code you've written, so I can't say much more.

Bojangles
  • 99,427
  • 50
  • 170
  • 208
  • I haven't coded the form yet. I'm doing the UI and someone else is doing the backend/database calls/etc. I'm just trying to get the other stuff to work so in the meantime, everything's a dummy. Here's one
  • . Note that there's another jQuery effect in play where "yes" opens one form and "no" another.
    • – Elyse Ku Felts Oct 07 '11 at 23:52
  • '
  • xxxx. — Audio Recognizable? '
    • – Elyse Ku Felts Oct 07 '11 at 23:54
  • label>Background Noise
     – Elyse Ku Felts Oct 07 '11 at 23:55
  • That's just enough of the form to see what's going on. There are a few more checkbox options for each.     – Elyse Ku Felts Oct 07 '11 at 23:56
  • 1
    You have just posted me meaningless HTML. Please edit your question to include it and format it nicely. – Bojangles Oct 08 '11 at 00:03
  • Sorry, on it right now :) Not sure how much context to give. Will work on it :) – Elyse Ku Felts Oct 08 '11 at 00:04