Multiple forms on 1 page - Help!

help
1

So I have a page where I have multiple forms on the same page. Basically it’s a scheduling form where the next 7 calendar days are listed (I’m using moment.js). From there there is an AM Shift and PM Shift for each date. I want to be able to let the user add employees to each shift. So there is a dropdown menu listing the employees where they can select and press add. I wrote the app so that all of the shifts are listed in on one page.

I actually don’t know if I’m doing this the correct way (from a design perspective). If anyone has any better ideas, please let me know. This is just one small part of the application. So I chose the quickest path of implementation. The guy I’m writing the app for told me repeatedly that simpler is better.

Thanks in advance.

2

Really looking for some help with this if anyone can assist.

3

Not really sure what exactly you are asking for help with? Are you concerned about how to handle events/data/whatever with this design, or concerned with the usability of the design itself?

Would help to see a demo of the app or at least screenshots.

4

I’m more concerned with how to handle events/data. I was just asking about the design because I’d be open to suggestions on how to do it better if anyone had any suggestions. I can publish it later today so you can see what I’m talking about. I don’t have my computer on me right now.

5

Ok, will be good to see an example.

Having multiple forms on a page is no problem. The way I usually do it is give give them all a class name (e.g. “shift-form”) and then a unique data attribute (e.g. data-form-for="{{userId}}", or something similar). Then you can create one event handler like: “submit .shift-form”: function(event, template) { … }.

To figure out which form was submitted, you just get the data attribute like so: var userId = $(event.currentTarget).data(“form-for”);

It seems quite weird to use a form to do something simple like assigning a shift slot for a user. Unless you have additional fields to add more details or something? Or maybe I’m just not picturing it right.

6

I wasn’t really sure what to do in terms of design. I’m open to suggestions. I don’t think you’re misunderstanding me. All I’m doing is assigning users to slots.

7

hello you,

is what you’re talking about also possible if both forms are within the same template? Because I’m trying this and it does not work. My code:

html:

<template name="tabelle_ausfuellen">
  <div class="table-responsive">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>TAS</td>
          <td>TEE</td>
          <td>SE</td>
          <td>Teetasse</td> 
        </tr>
        <tr>
          <td>DE</td>
          <td>WURST</td>
          <td>RIN</td>
          <td>{{#if second_item}}Wurstrinde {{/if}} 
            <form name="wurstrinde"> 
              <input type="text" class="form-control" name="Wurstrinde">
            </form>
          </td>
        </tr>
        <tr>
          <td>BROT</td>
          <td>BE</td>
          <td>SCHEI</td>
          <td>{{#if second_item}} Brotscheibe {{/if}} 
            <form name="brotscheibe"> 
              <input type="text" class="form-control" name ="Brotscheibe">
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

js:

Template.tabelle_ausfuellen.events({
		'submit form .wurstrinde': function(event){
			event.preventDefault();
			var givenAnswer = $('[name="Wurstrinde"]').val();
			if (givenAnswer == "Wurstrinde"){
				var second_item=true;
				console.log("correct answer");
				$('[name="Wurstrinde"]').val('');
			} else {
				console.log ("wrong answer");
				$('[name="Wurstrinde"]').val('');
			}
		},

		'submit form .brotscheibe': function(event){
			event.preventDefault();
			var givenAnswer = $('[name="Brotscheibe"]').val();
			if (givenAnswer == "Brotscheibe"){
				var second_item=true;
				console.log("correct answer");
				$('[name="Brotscheibe"]').val('');
			} else {
				console.log ("wrong answer");
				$('[name="Brotscheibe"]').val('');
			}
		}
	});

i’ve also tried to change the “name” of the form to the class, as you said. what happens in both cases is nothing (even though they both work on their own, checking the answer)

would be lovely if you could help out,

best, sissi