How can I get the input id from the submit event in meteor?

Question

In one template, I have:

    <template name="moviesTemplate">
     <form>
       <ul>
         {{#each movies}}
           <li>
             {{title}} <input id="{{title}}" type="submit" value="Delete" />  
           </li> 
         {{/each}}
      </ul>
    </form>
    </template>

When the user clicks Delete on the moviesTemplate, I want to find the id property of the input element from within the event in my javascript file:

Template.moviesTemplate.events = {
    'submit': function (e, tmpl) {
        e.preventDefault();
        var theId = theButtonThatRaisedTheEvent.id.toString();  // <--- This is what I'm referring to

     }
 }

How can I find this element? I thought it was 'e', but I can't seem to get any Id out of it. Perhaps I misunderstand...

Edit 1:

Okay, so it seems that 'e' is the event, which doesn't contain any information related to the source element. How else do I go around accomplishing this? Do I need to rethink about how I'm doing this?

Peppe L-G · Accepted Answer · 2014-09-09T14:26:30.763

2

To me it sounds like the id belongs to the form, and not to the submit button. I would use the following:

<template name="main">
    <form data-id="anId">
        <input type="submit" value="Delete!">
    </form>
</template>

Template.main.events({
    'submit form': function(event, template){
        event.preventDefault() // Don't submit it!
        var id = event.currentTarget.getAttribute('data-id') // Get the id attribute.
        console.log(id)
    }
})

Update

Replace the template you have now with:

<template name="moviesTemplate">
    <ul>
        {{#each movies}}
            <li>
                <form data-id="{{title}}">
                    {{title}} <input type="submit" value="Delete" />  
                </form>
            </li> 
        {{/each}}
    </ul>
</template>

And use the event handler previously written in this post.

Actually, this inside the event handler will be the context of the movie, so the handler can simply be:

Template.main.events({
    'submit form': function(event, template){
        event.preventDefault() // Don't submit it!
        var id = this.title // Get the title through the context.
        console.log(id)
    }
})

so there's no need using the data-id attribute on the form.

edited Sep 09 '14 at 14:26

answered Sep 09 '14 at 11:19

Peppe L-G

7,351
2
25
50

I've updated my question. The problem I'm actually experiencing (which I should have mentioned), is that I'm dealing with a Delete button for each item in the list. When the list is generated, the button is created with it's id of the id from the item in the DB. – Daniel Minnaar Sep 09 '14 at 13:10
@drminnaar, isn't it your template so you can change it? Otherwise I would go with Kuba Wyrobeks solution. – Peppe L-G Sep 09 '14 at 13:53
It is mine, but what do you mean change it? Are you suggesting I change the way I design the template - and if so could you give an example of how to implement the List with corresponding delete buttons? – Daniel Minnaar Sep 09 '14 at 14:06
That's perfect - elegant. Thank you. – Daniel Minnaar Sep 10 '14 at 06:27

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Unfortunately; it's not that straightforward.

A starting point would be similar to this answer However you may want to handle things like "enter" key being pressed on element

Template.moviesTemplate.events = {
    'click input[type=submit]': function(e, tmpl){
       tmpl.find('input[type=submit]').data('clicked',false);
       $(e.currentTarget).data('clicked',true);
    },
    'submit': function (e, tmpl) {
        e.preventDefault();
        var theId = tmpl.find('input[type=submit]').filter(function(i,ele){
          return $(ele).data('clicked');
        }).get(0).attr('id');    
     }
}

edited May 23 '17 at 12:14

Community

1
1

answered Sep 09 '14 at 10:27

nathan-m

8,875
2
18
29

The reason I asked whether there are alternatives to my approach, is because an item-deletable list is an extremely typical scenario in any application. Why is the solution to delete an item from the list so complex? Am I missing something here? – Daniel Minnaar Sep 09 '14 at 10:54

Kuba Wyrobek · Answer 3 · 2014-09-09T10:39:29.510

0

Use tmpl.find and grab id:

Template.moviesTemplate.events = {
     'submit':function(e, tmpl){
         e.preventDefault();
      },
     'click input[type="submit"]':function(e, tmpl){
         console.log(e.currentTarget.id)
     }
 }

Proof

edited Sep 09 '14 at 10:39

answered Sep 09 '14 at 10:01

Kuba Wyrobek

5,273
1
24
26

And what if I have multiple delete buttons (from an each loop)? Surely there must be a way to access the instance which raised the event? – Daniel Minnaar Sep 09 '14 at 10:06

redress · Answer 4 · 2015-04-23T01:06:40.610

You can create a single submit form event, and you conditionally check the event target field. Call appropriate Meteor method based on the collection you are inserting into.

Template.detailsViewTemplate.events({
    'submit form': function(ev){
        ev.preventDefault();

        var detail_input_field = template.$('#detail_entry');
        var message_input_field = template.$('#message_entry');

        if(detail_input_field != undefined){
            var detailFormData = {
            detail: $(ev.target).find('[name = detail]').val(),
            parentId: $(ev.target).find('[name = parentId]').val(),
            checkboxStatus: ''
            }

            Meteor.call('addDetail', detailFormData);
            $('.form-group').children().val('');

        } else if(message_input_field != undefined){
            var newMessageData = {
                listId: this.params_id,
                message: $(ev.target).find('[name = message]').val()
            }
            Meteor.call('addMessage', newMessageData);
            $('.form-group').children().val('');
        }
    }
}

How can I get the input id from the submit event in meteor?

4 Answers4