Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Bill Dowd
Bill Dowd
7,681 Points

How do I control multiple forms on a page

How do I control multiple forms on a page when some forms need different processing in the "$('form').submit(function(evt) { evt.preventDefault()"? There are a group of forms corresponding to menu buttons; they are to reveal some database query results for each button. Then each db result is surrounded by a form that gets processed in a different way.

I have found that I cannot place conditionals inside the "$('form').submit(function(evt) { evt.preventDefault()" so I'm not sure how to get the control I need.

Any thoughts, ideas or a better way to get the results that I'm hoping for?

1 Answer

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Give each form its own ID or class, like this:

<!-- Form #1 -->
<form action="index.php" method="get" id="form1">
  <!-- your code here -->
</form>

<!-- Form #2 -->
<form action="index.php" method="get" id="form2">
  <!-- your code here -->
</form>

<!-- Form #3 -->
<form action="index.php" method="get" id="form3">
  <!-- your code here -->
</form>

Then select the forms by their IDs or classes instead of their tag name:

// Form #1
$('#form1').submit(function(evt) {
  // your code here
  evt.preventDefault();
}); // end submit

// Form #2
$('#form2').submit(function(evt) {
  // your code here
  evt.preventDefault();
}); // end submit

// Form #3
$('#form3').submit(function(evt) {
  // your code here
  evt.preventDefault();
}); // end submit

Happy coding!

Bill Dowd
Bill Dowd
7,681 Points

Thank you Ryan. I will try that. Can I use class instead of ID and share the same code processing for that series of buttons?

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Sure! Just make sure to change it from an ID selector (like '#selector') to a class selector (like '.selector').

Bill Dowd
Bill Dowd
7,681 Points

Great, thank you.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

No problem!