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

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 >
    <form id="user-form">
        <div >
            <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 >
            <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 >
            <button  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 });
    },
...

CodePudding user response：

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) {

CodePudding user response：

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();
   ...
}