Getting current input value w/o submit

Hello,

I have a list of users, and buttons to control these users.

I can easily do things like disable the user, enable the user, as I can pass this._id , which grabs current row’s selected user. However if I try to update some data, eg. change the username’s last name, I can only get his lastname from the database using this.profile.name_last, which doesn’t change if I edit the last name field!

I tried:

main.js - client

email = template.find('#emailselect').value;

main.html - client

        <td><input class="form-control input-lg emailselect" id="emailselect" type="email" value={{emails.[0].address}} /></td>

I do get an e-mail from console.log, but only the very first e-mail in the list.

main.js - client

	'click .delete-user': function () {
			if(confirm('Warning: Same readded user will lose their history. Are you sure?')){

  Meteor.users.remove({ _id: this._id }, function (error, result) {
    if (error) {
    		Bert.alert(' '+error+' ', 'danger' );
      console.log("Error removing user: ", error);
    } else {
    	Bert.alert('User has been removed!', 'success' );
      console.log("Number of users removed: " + result);
    }
  })
}
},


'click .edit-user': function(event, template){
  //  var email = this.emails[0].address;
  var email = template.find('#emailselect').value;
	var username = this.username;
	var firstname = this.profile.name_first;
	var lastname = this.profile.name_last;
	var payment = this.profile.payment;
	var role = this.roles[0];

	console.log(email, username, firstname, lastname, payment, role);
			
			/*if(confirm('Save settings for this user?')){
         Meteor.call('updateUser', this._id, email, username, firstname, lastname, payment, role, function (err, result) {
        if (err) {
        		Bert.alert(' '+err+' ', 'danger' );
        		return false;
        } else {
            Bert.alert('User has been disabled successfully', 'success' );
        }

    })

} */


},

main.html


   <div class="table-responsive">

 <table class="table">

        <thead>
          <tr>
             <th datafield="date">E-mail</th>
         <th datefield="norm">Username</th>
             <th datafield="over">First name</th>
                 <th datafield="act">Last name</th>
     <th datafield="client">Hourly payment</th>
     <th datafield="client">Permissions</th>
     <th datafield="client">Disabled</th>
          <th datafield="client">Control Panel</th>
          </tr>
        </thead>

        <tbody>
           {{#each user_list}}
      <tr>
        <td><input class="form-control input-lg emailselect" id="emailselect" type="email" value={{emails.[0].address}} /></td>
        <td><input class="form-control input-lg username-select" id="userusername" type="text" value={{profile.username}} /></td>
        <td><input class="form-control input-lg firstname-select" id="userfirst" type="text" value={{profile.name_first}} /></td>
        <td><input class="form-control input-lg lastname-select" id="userlast" type="text" value={{profile.name_last}} /></td>
        <td><input class="form-control input-lg payment-select" id="userpayment" type="number" step="0.1" value={{profile.payment}} /></td>

        <td>
        <select class="form-control role-select userrole" id="userrole"> 
        <option> {{currentRole roles}} </option>
        <option> {{otherRole roles}} </option> 

        </select>


        </td>
        <td>{{disabled}}</td>
       <td> 
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="edit-user"><span class="glyphicon glyphicon-edit"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="enable-user"><span class="glyphicon glyphicon-ok-circle"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="disable-user"><span class="glyphicon glyphicon-ban-circle"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="delete-user"><span class="glyphicon glyphicon-remove-circle"></span></a></td>
      </tr>
    {{/each}}
       
        </tbody>
      </table>
      </div>

updateUser: function(userId, email, username, firstname, lastname, payment, role){

Meteor.users.update({_id: userId}, {$set: {"username": username}});
Meteor.users.update({_id: userId}, {$set: {"profile.name_first": firstname}});
Meteor.users.update({_id: userId}, {$set: {"profile.name_last": lastname}});
Meteor.users.update({_id: userId}, {$set: {"profile.payment": "9"}});
//Meteor.users.update({_id: userId}, {$set: {"emails.address": email}});

//Meteor.users.update({_id: userId}, {$set: {"roles": role}});

//Meteor.users.update({ _id: Meteor.userId(), 'emails.address': oldAddress }, { $set: { 'emails.address': newAddress }});

},

Looks like each row of your table need a unique identifier so you may use it to get that specific record.

As for using profile, did you see this https://guide.meteor.com/accounts.html#dont-use-profile

if i understand you correctly, you can do this in a much cleaner way with an additional user_list_row template.

{{#each user in user_list}}
  {{> user_list_row user=user}}
{{/each}}

now everything in your row template is scoped to that one user and you can do things like:

Template.user_list_row.events({
    "click .js-yourClickHandler": function (e) {
        console.dir(this.user);
    }
});

[EDIT] sent too early ^^

as meteor scopes DOM selectors in JS to the current template you can also query for the current value only:

Template.user_list_row.events({
    "click .js-yourClickHandler": function (e) {
      console.log($("input.emailselect").val());
    }
});

furthermore you shouldn’t use the id attribute within an each loop that way as it will generate multiple identical IDs. IDs have to be unique.

This is a project for something internal, it will not be used for public, so I am not going for something really secure, plus its my first ever Meteor app, and even my first web app. I would rewrite a ton of stuff, but I want it to work just)

So you’re using a different template for this. What does the template look like? Where are the buttons located in that template? What about fields like username, lastname, firstname etc.

the other template’s content would basically be exactly what’s in your each loop right now. it’s just about the scoping capability of a separate template which makes it much easier for you to handle things.

when talking about security, are you referring to my comment about the IDs? that’s no security concern, just a remark that without valid html your selectors will go crazy :slight_smile:

Security was about the usage of Meteor’s default profile values, that can be edited by anymore as it seems. However I did change some things like I am doing server-sided checks if user is an admin to change such values, not sure if it works now lol.
So my templte would look like

        <tbody>
           {{#each user_list}}
      <tr>
        {{> user_list_row user=user}}
      </tr>
    {{/each}}
       
        </tbody>
      </table>
      </div>
</template>

<template name="user_list_row">
{{#each user_list}}
  <td><input class="form-control input-lg emailselect" name="emailselect" type="email" value={{emails.[0].address}} /></td>
        <td><input class="form-control input-lg username-select" name="userusername" type="text" value={{profile.username}} /></td>
        <td><input class="form-control input-lg firstname-select" name="userfirst" type="text" value={{profile.name_first}} /></td>
        <td><input class="form-control input-lg lastname-select" name="userlast" type="text" value={{profile.name_last}} /></td>
        <td><input class="form-control input-lg payment-select" name="userpayment" type="number" step="0.1" value={{profile.payment}} /></td>

        <td>
        <select class="form-control role-select userrole" name="userrole"> 
        <option> {{currentRole roles}} </option>
        <option> {{otherRole roles}} </option> 

        </select>


        </td>
        <td>{{disabled}}</td>
       <td> 
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="edit-user"><span class="glyphicon glyphicon-edit"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="enable-user"><span class="glyphicon glyphicon-ok-circle"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="disable-user"><span class="glyphicon glyphicon-ban-circle"></span></a>
        <a style="text-decoration: inherit;color:inherit;cursor:pointer; margin-left:5px;" class="delete-user"><span class="glyphicon glyphicon-remove-circle"></span></a></td>
{{/each}}


</template>

Edit: NVM, I end up with a blank page.
I am sorry, but I am probably in a need to be spoon fed right now :frowning: