MeteorJS form submission is refreshing the page with event.preventDefault() enabled - forms

Question

The dating application is built with MeteorJS and the page refreshes whenever I attempt to submit this form to register a user. Also, Meteor.user().services.twitter.profile_image_url doesn't seem to get Twitter image. Please help
imports/ui/components/partials/register-user.html
<template name="registerUser">
<div class="user-card">
<form id="user-form">
<div class="row">
<label for="gender">gender</label>
<select id="gender">
<option value="cis man">cis man</option>
<option value="cis woman">cis woman</option>
<option value="non binary" selected>non binary</option>
<option value="trans man">trans man</option>
<option value="trans woman">trans woman</option>
</select>
</div>
<div class="row">
<label for="prefer">seeking</label>
<select id="prefer">
<option value="cis men">cis men</option>
<option value="cis women">cis women</option>
<option value="everyone" selected>everyone</option>
<option value="non binary">non binary</option>
<option value="trans women">trans women</option>
<option value="trans men">trans men</option>
</select>
</div>
<div class="row">
<button class="button-primary register-user" type="submit" form="user-form">register</button>
</div>
</form>
</div>
</template>
imports/ui/components/partials/register-user.js
import { Meteor } from 'meteor/meteor';
import { Session } from 'meteor/session';
import './register-user.html';
Template.registerUser.onCreated(function () {
this.register_name = Meteor.user().profile.name;
this.register_img = Meteor.user().services.twitter.profile_image_url;
});
Template.registerUser.events({
'submit .register-user' (event) {
event.preventDefault();
var gender = event.target.gender.value;
var prefer = event.target.prefer.value;
if (confirm("by continuing you verify you are a minimum of 21 years old")) {
Meteor.call('register.user', this.register_name, "", gender, prefer, (error) => {
if (error) {
Flash.danger(error.error, 3000);
} else {
Session.set({'complete': true});
}
});
}
},
});
imports/api/methods.js
...
'register.user': function(name, img, gender, prefer) {
RegisteredUsers.insert({ _id: this.userId, complete: true, role: false });
Profiles.insert({
_id: this.userId, name: name, img: img, gender: gender, prefer: prefer, address: "", right: [], matches: [],
});
// redisCollection.hset(this.userId, { "name": name, "img": img, "gender": gender });
},
...

Answer 1

Your example show an error on event mapping:
'submit .register-user' (event) {
You used a class mapping of the button, but the submit event is from the form. Then change it to:
'submit #user-form' (event) {

Answer 2

I think that the issue is because you are mapping the submit event to the button which has the class register-user. Try changing your code to refer to the form from which the submit event comes. You can use its id (user-form) for doing that.
It'd be something like this:
'submit #user-form'(event) {
event.preventDefault();
...
}