CODEWITHSUNDEEP
meteor
Zijah
Zijah

Reputation: 31

Routing to a new URL after onSubmit on a form in MeteorJS

I need to move to a different URL, within the application, making the :id part of the URL from a form. Basically, once someone enters a code in a form and submits it, I need to move to another route including that code. 

import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/ostrio:flow-router-extra'

import './search.html';
import './restaurants.js';

Template.body.events({
  'submit .search-restaurant'(event) {
    // Prevent default browser form submit
    //event.preventDefault();

    // Get value from form element
    const target = event.target;
    const postCode = target.text.value;
    FlowRouter.go('/restaurants/{{postCode}}');
    //Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)
   //FlowRouter.go('restaurants.show');
    //target.text.value = '';
  },
});

And this is the form:

<template name="search">
<p> Enter your postcode to see restaurants around you </p>
    <form class="search-restaurant">
      <input type="text" placeholder="4169" />
    </form>
</template>

Upvotes: 0

Views: 46

Answers (2)

coagmano
coagmano

Reputation: 5671

As an addition to Jankapunkt's answer, you can pass the id to go in an options object:

FlowRouter.go('restaurants.show'), { id: postCode });

I can see that you tried that on this line:

//Meteor.setTimeout(function() {FlowRouter.go('restaurants.show'), { postCode: postCode }}, 100)

But if your route uses :id, then you need to pass an object with the key id.
Also, you are missing a close bracket after : postcode } before the function close, so that might also be why that didn't work

Upvotes: 1

Jankapunkt
Jankapunkt

Reputation: 8423

You should build your URL using template literals:

const postCode = target.text.value;
FlowRouter.go(`/restaurants/${postCode}`);

This will resolve an input named foo to /restaurants/foo, so :id will be "foo" then.

Upvotes: 1

Related Questions