jQuery: On form submit, change form's style class

Question

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.

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
– artlung, Commented Oct 7, 2011 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
– Elyse Ku Felts, Commented Oct 7, 2011 at 23:58
Yes, I think you won't be submitting these forms normally if you have multiple on a single page. See: stackoverflow.com/questions/425095/… -- Also, welcome to StackOverflow! — artlung
– artlung, Commented Oct 8, 2011 at 0:02

Bojangles · Accepted Answer · 2011-10-07 23:45:00Z

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.

answered Oct 7, 2011 at 23:45

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Elyse Ku Felts Over a year ago

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 <li>. Note that there's another jQuery effect in play where "yes" opens one form and "no" another.

Elyse Ku Felts Over a year ago

'<li class="data">xxxx. <img src="imgs/Play Green.png" width="10" height="10" alt="" title="" border="0" /> — Audio Recognizable? <label><input type="radio" name="UtteranceRecoChoice" value="Utterance_xxxx_Reco" />Yes</label> <label><input type="radio" name="UtteranceRecoChoice" value="Utterance_xxxx_NoReco" />No</label>'

Elyse Ku Felts Over a year ago

<div id="Utterance_xxxx_Reco" class="Utterance"><form id="Utterance_xxxx_Reco"><input type="text" name="Utterance_xxxx_Transcription" value="Transcribe"> label><input type="checkbox" name="Utterance_xxxx_Coded" value="Background Noise">Background Noise</label><input type="submit" name="submit" value="Save" class="save"></small></form></div>

Elyse Ku Felts Over a year ago

<div id="Utterance_xxxx_NoReco" class="Utterance"><form id="Utterance_xxxx_NoReco"><small><label><input type="checkbox" name="Utterance_xxxx_Coded" value="Silent">Silent</label> <input type="submit" name="submit" value="Save" class="save"></small></form></div></li> That's just enough of the form to see what's going on. There are a few more checkbox options for each.

Bojangles Over a year ago

You have just posted me meaningless HTML. Please edit your question to include it and format it nicely.

|

yati sagade · Accepted Answer · 2011-10-07 23:46:05Z

1

use the .addClass() method. http://api.jquery.com/addClass/

answered Oct 7, 2011 at 23:46

yati sagade

1,38510 silver badges25 bronze badges

Collectives™ on Stack Overflow

jQuery: On form submit, change form's style class

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related