How to get form values ​​in meteor?

Question

I get an error Uncaught TypeError: Cannot read property 'value' of undefined, but it has something to do with how I fire the event.

Here is the skeleton of my code:

HTML

<template name="register">
    <form>
        <input type="text" name="username">
        <input type="email" name="email">
        <input type="password" name="password">

        <button type="button" class="register">Register</button>
    </form>
</template>

Javascript

Template.register.events({
    'click .register': function(e) {
        e.preventDefault();
        var getUser = e.target.username.value;
        var getEmail = e.target.email.value;
        var getPassword = e.target.password.value;

        console.log("user: " + getUser);
    }
)};

I feel that there is something to do with the button class click eventthat does not return any values. I tried to use submit event, but I do not know how to get the values.

Answer 1

-, " , , -, , submit, listenning . , , .

<template name="register">
    <form class="form-register">
        <input type="text" name="username">
        <input type="email" name="email">
        <input type="password" name="password">

        <button type="submit" class="register">Register</button>
    </form>
</template>

, , . :

Template.register.events({
    'submit .form-register': function(event, template) {
        event.preventDefault();
        var getUser = event.target.username.value;
        var getEmail = event.target.email.value;
        var getPassword = event.target.password.value;

        console.log("user: " + getUser);
    }
)};

, . , , . , , , , . , , , , , , findAll .., checkout .

, , , .

Answer 2

. , :

var name = document.getElementById('idOfUsernameInputField').value;

.

Answer 3

@Shi-ii, JQuery. , JQuery, , JQuery - undefined. ?

. name id, JQuery .

HTML

<template name="register">
    <form>
        <input type="text" id="username" />
        <input type="email" id="email" />
        <input type="password" id="password" />

        <button type="button" class="register">Register</button>
    </form>
</template>

JavaScript

Template.register.events({
    'click .register': function(e) {
        e.preventDefault();
        var getUser = $("#username").val();
        var getEmail = $("#email").val();
        var getPassword = $("#password").val();
    }
});

Answer 4

js

$.fn.searlizeObject = function() {
  var array = this.serializeArray() || [];
  var formData = {};
  array.forEach(function(formElem) {
     formData[formElem.name] = formElem.value;
  });
  return formData;
}

Template.register.events({
  'click .register': function(e) {
   var data = $("#userForm").searlizeObject();
   console.log('my form data is ',data);
});

,

<template name="register">
<form id="userForm">
    <input type="text" id="username" />
    <input type="email" id="email" />
    <input type="password" id="password" />

    <button type="button" class="register">Register</button>
</form>
</template>

Bye Enjoy Coding!!!!

Answer 5

You will not receive any other content related to your event. Since the button is not an input for sending, it does not negate all other inputs (as shown in the Meteor documentation).

If you replace <button type="button" class="register">Register</button>with <input type="submit" class="button register" value="Register">, you will get the desired behavior (where the values ​​are passed to the event handler); your handler will look like this: Template.register.events({ 'submit': function(e){...otherwise it will not change.