event.target.name.value - Uncaught TypeError: Cannot read property 'value' of undefined

Question

I have a form and some javascript logic I am using within a Meteor.js app. When submitting the form. I am getting the error:

Uncaught TypeError: Cannot read property 'value' of undefined

It is complaining about this line:

var email = event.target.email.value.toLowerCase();

This is what the form looks like:

<form class="request-form" id="request-form" method="post" action="#">
                    <div class="form-group">
                      <input type="text" name="name" id="name" value="" class="form-control" placeholder="Your Name" required />
                    </div>
                    <div class="form-group">
                      <input type="text" name="email" id="email" value="" class="form-control" placeholder="Email Address" required />
                    </div>
                    <div class="form-group">
                      <input type="text" name="subject" id="subject" value="" class="form-control" placeholder="Subject" required />
                    </div>
                  </form>
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="block">
                  <form>
                    <div class="form-group-2">
                      <textarea id="message" name="message" class="form-control" value="" rows="3" placeholder="Your Message"></textarea>
                    </div>
                    <button class="btn btn-default submit" type="submit">Send Message</button>
                  </form>

This is what the logic handler looks like:

    Template.contact.events({
        'submit form': function(event, template) {
            event.preventDefault();
            var $form = template.$('#request-form');

                if ($form.valid()) {

                    var name = event.target.name.value;

//COMPLAINING ABOUT THIS
var email = event.target.email.value.toLowerCase();

                    var subject = event.target.subject.value;
                    var message = event.target.message.value;

                    UserList.insert({
                        name: name,
                        email: email,
                        subject: company,
                        message: message
                    });

                   // template.showForm.set( false );
                }

            window.scroll(0,0);
        }
    });

Which form is submitted #request-form or form-group-2 one? — MaxZoom
There are two forms in the HTML - to find out which one is submitted put this code alert(event.target) — MaxZoom

Vladimir M Vladimir M · Accepted Answer · 2016-09-20T21:46:35

If you have an id attribute assigned to the field, and you are sure that this field is always filled, then you can access it by:

var email = $("#email").val();

I think the main problem is that you have 2 forms. And submit is acting on a different form from where your e-mail is.

event.target.name.value - Uncaught TypeError: Cannot read property 'value' of undefined

1 Answers